relative absolute float 定位总结

1）relative：脱离文档流，但保留占位符，其偏移位置是相对于本身在正常文档流中时的位置

图解：

<div style="width:100%; height:500px; background:pink;"><div style="width:200px; height:100px; position:relative; left:100px; top:50px; background:brown;"></div><div style="width:200px; height:100px; background:gray;"></div></div>

正常位置： 设置relative属性后的位置：

注释：脱离文档流是说设置了relative属性之后，元素不在z-index:0;的正常文档流中，其z-index的值>0，但保留占位符，就是在正常文档流中位置保留着，后继元素不能占位，然后相对于本身正常位置的左部以及顶部进行偏移（left，top），right跟bottom就是相对于本身正常位置的右部以及底部进行偏移，这个读者可以自行试验。

2）absolute：完全脱离文档流，不保留占位符，其元素定位是相对于其父级及以上，一直追溯至设置了position:relative或absolute或fixed属性的外层元素（包含块），如果其外层元素均未设置position属性，则定位是相对于HTML文档进行的绝对定位，并不是相对于body的定位。

注释：并不会相对于浮动元素定位，并且浮动元素若不设置position属性，其位置只能是尽可能的往左贴或往右贴

<div style="width:100%; height:500px; background:pink;"><div style="width:800px; height:400px; position:relative; left:200px; top:100px; background:brown;"><div style="width:500px; height:200px; background:gray; float:right;"><div style="width:200px; height:100px; background:blue;position:absolute; left:100px; top:100px;"></div></div></div></div>

特意将gray背景的div设置向右浮动，蓝色div是相对于棕色div绝对定位的。

图解：

3）float：浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，文字内容会环绕在浮动元素周围，当一个元素从正常的文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补它原先的空间。--摘抄至网友评论