簡明CSS定位屬性position
2024-07-11 08:50:54
供稿：網(wǎng)友
POSITION
該屬性用來決定元素在頁面上的位置。
用法：position：static(默認(rèn)) | fixed | relative | absolute
static
遵守正常的文檔流，不設(shè)置top,bottom,left,right值。
fixed
脫離正常的文檔流，完全以瀏覽器窗口為參照物，不隨鼠標(biāo)的滾動(dòng)而滾動(dòng)。設(shè)定tblr值。
relative
相對(duì)于什么呢？是相對(duì)于該元素原本在文檔流中的位置進(jìn)行偏移。
也就是說，如果按文檔流其本來應(yīng)該在A處，設(shè)置了relative屬性和left=10px;
則最后的位置為：A向右偏移10px。
當(dāng)然這個(gè)元素的大小是不會(huì)改變的，因此會(huì)導(dǎo)致覆蓋其他框。
應(yīng)用：取相對(duì)定位值的元素通常作為取絕對(duì)定位值元素的父級(jí)容器。
absolute
為何稱絕對(duì)呢？因?yàn)樵撛匾ㄎ?，?ldquo;絕對(duì)”要從里到外一層層容器找，找設(shè)定了position屬性的元素（默認(rèn)值static不算）。
也就是說，如果X被設(shè)定為絕對(duì)定位，定位時(shí)那么就要看X的父級(jí)Y是不是設(shè)定了position(一般是relative,如前文所述)，沒有？繼續(xù)看Y的父級(jí)Z是不是設(shè)定了position...若是實(shí)在沒有，就以html元素為基準(zhǔn)定位咯。
元素脫離了正常文檔流。因此會(huì)導(dǎo)致覆蓋其他框。
應(yīng)用：通過僅僅設(shè)置絕對(duì)定位屬性，可以讓元素定位到網(wǎng)頁的任何部分。（當(dāng)然以relative父級(jí)為基準(zhǔn)也不錯(cuò)啦）
好。position幾種值介紹完畢，上文中幾次提到了覆蓋一詞。
那么如何決定元素重疊時(shí)誰上誰下呢？這里就引入了 z-index 屬性。
Z-INDEX
通過給各個(gè)元素的z-index賦數(shù)值，重疊時(shí)進(jìn)行比較，大的在上，小的在下。
用法：z-index：auto(默認(rèn)) | 正/負(fù)值 |inherit
用處：僅能用于定位元素（即設(shè)定了position屬性值）
auto
默認(rèn)值，與其父級(jí)元素一致。
inherit
明確指出其必須從父級(jí)元素繼承。
注意：若是index值相同，則依它們?cè)谖臋n流中出現(xiàn)的順序決定層疊順序，后來者上。
再就是top/bottom/left/right了。
top/bottom/left/right
設(shè)置偏移量。
用法：top: auto(默認(rèn)) |值|百分比
用處：僅限用于定位元素。
值直接用px等表示。百分比是相對(duì)父級(jí)容器來講的。
比如，定位元素X的left=50%, 假定其父級(jí)容器為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里的四個(gè)參數(shù)是像素值。四個(gè)值都相對(duì)于圖像左上方的（0,0）點(diǎn)。
比如圖像原寬度為100px，rect里設(shè)定right=10px, 則裁剪過后，圖像的寬度為10px。右邊距左移了90px.
-----------------------------------------------------
定位 到此結(jié)束。
