POSITION

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

static

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

fixed

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

relative

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

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

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

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

absolute

為何稱絕對呢？因?yàn)樵撛匾ㄎ?，?ldquo;絕對”要從里到外一層層容器找，找設(shè)定了position屬性的元素（默認(rèn)值static不算）。
也就是說，如果X被設(shè)定為絕對定位，定位時那么就要看X的父級Y是不是設(shè)定了position(一般是relative,如前文所述)，沒有？繼續(xù)看Y的父級Z是不是設(shè)定了position...若是實(shí)在沒有，就以html元素為基準(zhǔn)定位咯。
元素脫離了正常文檔流。因此會導(dǎo)致覆蓋其他框。

應(yīng)用：通過僅僅設(shè)置絕對定位屬性，可以讓元素定位到網(wǎng)頁的任何部分。（當(dāng)然以relative父級為基準(zhǔn)也不錯啦）

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

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

Z-INDEX

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

auto

默認(rèn)值，與其父級元素一致。

inherit

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

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

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

top/bottom/left/right

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

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

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

clip

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

auto 不裁剪

rect里的四個參數(shù)是像素值。四個值都相對于圖像左上方的（0,0）點(diǎn)。

比如圖像原寬度為100px，rect里設(shè)定right=10px, 則裁剪過后，圖像的寬度為10px。右邊距左移了90px.

-----------------------------------------------------

定位 到此結(jié)束。

最新評論