/* 極盡淺顯 前輩請忽略*/
第一話 定位 （Positioning）
關鍵詞：position/z-index/top/bottom/right/left/clip
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）點。
比如圖像原寬度為100px，rect里設定right=10px, 則裁剪過后，圖像的寬度為10px。右邊距左移了90px.
-----------------------------------------------------
定位 到此結束。