css的position定位详解
- position元素定位四个取值:static(静态默认文档流),relative(相对定位,相当于原文档流进行定位),absolute(绝对定位,相当于上个已经定位的父级元素进行定位),fixed(相当于浏览器窗口进行固定)
- relative情况:相对定位,会根据之前进行位置偏移,但是原来位置留着空白,保留原来文档流
- 代码详情:
- html部分: <div id="d1">列表1 <div id="d11">列表1-1</div></div> <div id="d2">列表2</div> <div id="d3">列表3</div>
- css部分: div{ width:200px; height:200px; background-color:green; margin-top:20px; } #d1{ position:relative; top:30px; left:200px;}
3.absolute情况:相绝对定位,根据父级已经定位的元素进行偏移,如果父级元素没有定位以body进行偏移,偏移后不占用文档流,偏移后,下面的元素进行部位上去
- 父级元素没有定位的absolute定位情况:
- 代码详情
- html代码: <div id="d1">列表1 <div id="d11">列表1-1</div></div> <div id="d2">列表2</div> <div id="d3">列表3</div> css部分: div{ width:200px; height:200px; background-color:green; margin-top:20px; } #d1{ position:relative; top:30px; left:200px; background:blue; }
ii.父级元素定位(相对relative)的absolute定位情况:
iii. 父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白
iii. 父级元素定位(绝对定位absolute)的子元素relative定位情况:父元素原文档流空白,子元素保留原来文档流空白
4.fixed固定:相当于浏览器窗口固定(不随导航条位置改变)
5.static默认正常文档流,没有变化
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-1-2，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读