最近仿寫天貓首頁時，總是遇到position覆蓋問題。因此，特來總結一番。
一般定位除了margin,padding普通流的定位外，還有position ,float等定位。
這些都是定位，那遵循什麼規則能保證各種之間不衝突呢？以下均在chrome等A等瀏覽器中測試一致
表意
position
absolute(絕對定位)/relative(相對定位)/fixed(相對瀏覽器窗口定位)/static(靜態，默認。)
relative相對於自己在普通文檔流中的位置。
absolute相對與上級節點定位爲abs/rel的元素或者瀏覽器左上角。
fixed相對於瀏覽器窗口
z-index
1000;//在本節點下的覆蓋優先級爲1000，越大就在頁面的越上方
float
left(左浮動)/right(右浮動)
float的相對，知道碰到瀏覽器邊緣或者其他浮動元素的邊緣(因此可能覆蓋其他未浮動元素)。脫離了普通文檔流
現象解釋
position
absolute總是會覆蓋或者被覆蓋。以爲，absolute是絕對定位，總是相對與父節點（定位爲rel/abs）的左上角的。與其他元素無關，只與父元素有關。一層一層的關係得到的一個位置。既然已經脫離了普通的文檔流，那麼其他元素還可以重複使用原來的位置。即，可能會被覆蓋。
代碼如下：
<style>
div{border: 1px solid red;width: 200px;height: 200px;background-color: black;}
</style>
<div style="position: absolute;width: 100px;height: 100px;background-color: #000066"></div>
<div></div>
<div style="position:absolute;width:300px;height: 300px;background-color: grey;">
<div style="position: absolute;width:100px;height: 200px;background-color: green"></div>
</div>
ps:如上圖，前面一個div絕對定位，藍色。有一個普通流的黑色div兄弟。前者蓋住了後者。因爲前者脫離普通文檔流不佔位。
下方的div完全不受影響。相對於黑色的普通div定位。
總之，absolute定位不會被非上級且非普通流 的元素所影響。兄弟節點直接不影響。如果刪除上例的第二個空div,則下放的div會覆蓋上面藍色的div.
relative總是不會被覆蓋。但是在平時的佈局中又不能起到很大的重要。
float
float只與float關。不受position的影響。同樣只受父節點的影響。
<style>
div{border: 1px solid red;}
</style>
<div style="position:absolute;width:100px;height: 400px;background-color: grey;">
<div style="float: left;width:350px;height: 50px;background-color: #000066"></div>
</div>
<div style="position:absolute;width:300px;height: 300px;background-color: grey;">
<div style="position: absolute;width:100px;height: 200px;background-color: green"></div>
</div>
<div style="float: left;width: 100px;height: 100px;background-color: #000066">此時相對於body</div> 
兩個float沒有相互影響（沒有並排）。
總結
float隻影響兄弟爲float的。
position只受祖父（祖父中最近的定位爲rel/abs的元素，沒有就是瀏覽器）影響。absolute相對於父節點左上角，若前面有定位爲非rel/abs/fix元素則相對於該元素的左下角，即不擠佔。同層的position，會覆蓋，即相互之間不影響。relative只是相對與普通流的位置而已，不會發生覆蓋。
小疑挖掘
那麼，爲什麼絕對定位加負邊距可以居中呢？！why?
請點擊下一篇博客>>>>>>
http://blog.csdn.net/qq_28300493/article/details/52345970