Position 定位解读
今天对css中的position的几个参数值做一个总结。
position 中的几个参数值
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit
规定应该从父元素继承 position 属性的值。
文档流是什么?
将浏览器窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端。 若当前行容不下, 则另起新行再浮动。
内联元素也不会独占一行。 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。
有三种情况将使得元素脱离文档流而存在,分别是 浮动,绝对定位, 固定定位。 但是在IE6中浮动元素也存在于文档流中。
relative 相对定位
生成相对定位的元素,相对于其正常位置进行定位。
使用position:relative
定位,其元素依旧在文档流中。
position: relative; left:20px; top:20px;
fixed 相对浏览器固定定位
生成相浏览器元素,相对于浏览器位置进行定位。
使用position:fixed
定位,其元脱离文档流。
当页面发生了滚动,我们可以看到,页面的内容已经根据滚动条的位置发生了位移。但是我们的test3 依旧是在相对于浏览器的位置
position: fixed;left:200px;top:200px;
absolute 绝对定位
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
使用position:absolute
定位,其元脱离文档流。
HTML代码
<div class="text1">text1 <div class="text2">text2 <div class="text3">text3</div> </div> </div>
第一种情况
如上图所示,父元素没有定位默认为static ,test3的div相对于文档偏移
.text1{ width:100px; height: 100px; background: pink; } .text2{ width:50px; height: 50px; background: grey; } .text3{ width:100px; height: 100px; position: absolute; left:100px; top:100px; background:bisque; }
第二种情况
如上图所示,text2相对于正常文档流偏移,text3 的div 相对于 text2的div 向左偏移10px,向下偏移10px; 即相对于 static 定位以外的第一个父元素进行定位。
.text1{ width:300px; height: 300px; background: pink; } .text2{ width:250px; height: 250px; position: relative; left:10px; top:10px; background: grey; } .text3{ width:30px; height: 30px; position: absolute; left:10px; top:10px; background:bisque; }
第三种情况
如图所示,text2的div相对浏览器偏移,text3的div相对text2的div进行偏移。即相对于 static 定位以外的第一个父元素进行定位。
.text1{ width:300px; height: 300px; background: pink; } .text2{ width:250px; height: 250px; position: fixed; left:10px; top:10px; background: grey; } .text3{ width:30px; height: 30px; position: absolute; left:10px; top:10px; background:bisque; }
第四种情况
如图所示,text2 的div 相对文档流偏移,text3的div 相对text2 的div 偏移。即相对于 static 定位以外的第一个父元素进行定位。
.text2{ position: absolute; left:100px; top:100px; } .text3{ position: absolute; left:10px; top:10px; }