POSITION

該屬性用來決定元素在頁面上的位置。
用法：position：static(默認) | fixed | relative | absolute

static

遵守正常的文檔流，不設置top,bottom,left,right值。

fixed

脫離正常的文檔流，完全以瀏覽器窗口為參照物，不隨鼠標的滾動而滾動。設定tblr值。

relative

相對于什么呢？是相對于該元素原本在文檔流中的位置進行偏移。

也就是說，如果按文檔流其本來應該在A處，設置了relative屬性和left=10px;

則最后的位置為：A向右偏移10px。
當然這個元素的大小是不會改變的，因此會導致覆蓋其他框。

應用：取相對定位值的元素通常作為取絕對定位值元素的父級容器。

absolute

為何稱絕對呢？因為該元素要定位，就“絕對”要從里到外一層層容器找，找設定了position屬性的元素（默認值static不算）。
也就是說，如果X被設定為絕對定位，定位時那么就要看X的父級Y是不是設定了position(一般是relative,如前文所述)，沒有？繼續看Y的父級Z是不是設定了position…若是實在沒有，就以html元素為基準定位咯。
元素脫離了正常文檔流。因此會導致覆蓋其他框。

應用：通過僅僅設置絕對定位屬性，可以讓元素定位到網頁的任何部分。（當然以relative父級為基準也不錯啦）

好。position幾種值介紹完畢，上文中幾次提到了覆蓋一詞。

那么如何決定元素重疊時誰上誰下呢？這里就引入了 z-index 屬性。

Z-INDEX

通過給各個元素的z-index賦數值，重疊時進行比較，大的在上，小的在下。
用法：z-index：auto(默認) | 正/負值 |inherit
用處：僅能用于定位元素（即設定了position屬性值）

auto

默認值，與其父級元素一致。

inherit

明確指出其必須從父級元素繼承。

注意：若是index值相同，則依它們在文檔流中出現的順序決定層疊順序，后來者上。

再就是top/bottom/left/right了。

top/bottom/left/right

設置偏移量。
用法：top: auto(默認) |值|百分比
用處：僅限用于定位元素。

值直接用px等表示。百分比是相對父級容器來講的。

比如，定位元素X的left=50%, 假定其父級容器為Y（寬度為Y_width），則該偏移相當于，left=Y_width * 50%.

clip

用于裁剪元素（不限于圖像哦）。
用法：clip : auto（默認） | rect ( top, right, bottom, left )
用處：僅用于屬性position:absolute && overflow != visible的元素。

auto 不裁剪

rect里的四個參數是像素值。四個值都相對于圖像左上方的（0,0）點。