css定位-position的用法详解

定义和用法

position 属性规定元素的定位类型。

定位类型

static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。

relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

inherit：规定应该从父元素继承 position 属性的值。

什么是文档流？

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

<div style="position:relative; width:300px; height:300px; background-color:silver; border:5px solid red;">
    <div style="width:100px; height:100px; background-color:blue;"></div>
    <div style="margin:0 0 0 100px; width:200px; height:200px; background-color:gold;">
        <div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:green;">
        </div>
    </div>
</div>

 

示意：