定位相关总结
(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属性