CSS定位总结

定位相关总结

（1）文档流：就是HTML的布局机制。块元素（block）独占一行，内联元素（line）不独占一行。

（2）相对定位：就是相对于一个东西定位。这个东西就是它本身，同时可以使用left、top、bottom、right来移动元素的位置。

注意：相对定位不会脱离文档流。

（3）绝对定位：找一个东西相对来 绝对定位。这个东西是什么呢？这个东西（element）必须设定position，并且定位方式非static。再说直白一点，这个小鬼（element）定位可以是他爸爸、他爷爷、他太公。。。。（祖宗、body）中有钱（position：absolute、position：relative、position：fixed），就是不能是程序员（position：static或直接没有定位的）。

注意：绝对定位脱离文档流。一般使用“父相子绝”。

使用绝对定位设置top：0和不设置top属性有区别吗？

有区别，如果没有设置top属性，元素的位置和没有脱离文档流的位置一样。

<div class="div1" style="width: 250px;height: 250px;border: 1px solid black">
    太爷爷
    <div class="div2" style="width: 200px;height: 200px;border: 1px solid red ">
        爷爷
        <div class="div3" style="width: 150px;height:150px;border: 1px solid blue;position: fixed">
            爸爸
            <div class="div4" style="width: 50px;height: 50px;border: 1px solid yellow;position: absolute;bottom: 0">小鬼</div>
</div>
    </div>
</div>

（4）fixed定位：就是相对于浏览器窗口的定位

使用了position属性，一般不使用margin，padding属性