今天对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;
}