CSS樣式表中的position屬性詳細(xì)說(shuō)明
2024-07-11 08:27:12
供稿：網(wǎng)友
在CSS中關(guān)于position定位的內(nèi)容是：
position: relative | absolute | static | fixed
static(靜態(tài)) 沒(méi)有特別的設(shè)定，遵循基本的定位規(guī)定，不能通過(guò)z-index進(jìn)行層次分級(jí)。
relative(相對(duì)定位) 對(duì)象不可層疊、不脫離文檔流，參考自身靜態(tài)位置通過(guò) top,bottom,left,right 定位，并且可以通過(guò)z-index進(jìn)行層次分級(jí)。
absolute(絕對(duì)定位) 脫離文檔流，通過(guò) top,bottom,left,right 定位。選取其最近一個(gè)最有定位設(shè)置的父級(jí)對(duì)象進(jìn)行絕對(duì)定位，如果對(duì)象的父級(jí)沒(méi)有設(shè)置定位屬性，absolute元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位，可以通過(guò)z-index進(jìn)行層次分級(jí)。
fixed(固定定位)這里所固定的參照對(duì)像是可視窗口而并非是body或是父級(jí)元素。可通過(guò)z-index進(jìn)行層次分級(jí)。
CSS中定位的層疊分級(jí)：z-index: auto | namber;
auto 遵從其父對(duì)象的定位
namber 無(wú)單位的整數(shù)值。可為負(fù)數(shù)
relative(相對(duì)定位)只可以在文本流中進(jìn)行位置的上下左右的移動(dòng)，雖然他的表現(xiàn)區(qū)脫離了文本流，但是在文本流卻依然為其保留了一席之地，這就好比一個(gè)打工的人他到了外地，但是在老家依然有一個(gè)專屬于他的位置，這個(gè)位置不隨他的移動(dòng)而改變。這樣很明顯就會(huì)空出一塊空白來(lái)，如果希望文本流拋棄這個(gè)部分就需要用到絕對(duì)定位。
absolute(絕對(duì)定位)不光脫離了文本流，而且在文本流中也不會(huì)給這個(gè)絕對(duì)定位元素留下專屬空位。這就好比是一個(gè)工廠里的職位，如果有一個(gè)工人走了自然會(huì)要有別的工人來(lái)填充這個(gè)位置。而移動(dòng)出去的部分自然也就成為了自由體。絕對(duì)定位將可以通過(guò)TRBL(TOP、RIGHT、BOTTOM、LEFT簡(jiǎn)稱TRBL)來(lái)設(shè)置元素，使之處在任何一個(gè)位置。在父層position屬性為默認(rèn)值時(shí)，TRBL的坐標(biāo)原點(diǎn)以body的坐標(biāo)原點(diǎn)為起始。
關(guān)于position
1. position:static
所有元素的默認(rèn)定位都是：position:static，這意味著元素沒(méi)有被定位，而且在文檔中出現(xiàn)在它應(yīng)該在的位置。
一般來(lái)說(shuō)，不用指定 position:static，除非想要覆蓋之前設(shè)置的定位（也就是說(shuō)，不繼承父容器的position屬性值！！！）。
2. position:relative
如果設(shè)定 position:relative，就可以使用 top,bottom,left 和 right 來(lái)相對(duì)于元素在文檔中應(yīng)該出現(xiàn)的位置來(lái)移動(dòng)這個(gè)元素。
意思是元素實(shí)際上依然占據(jù)文檔中的原有位置，只是上相對(duì)于它在文檔中的原有位置移動(dòng)了。
3. position:absolute
當(dāng)指定 position:absolute 時(shí)，元素就脫離了文檔(即在文檔中已經(jīng)不占據(jù)位置了)，可以準(zhǔn)確的按照設(shè)置的 top,bottom,left 和 right 來(lái)定位了。
Inherit (值)屬性：
inherit故名思意是“繼承”的意思。所以它所表達(dá)的值也是繼承相關(guān)的了。
通過(guò)在特定元素上設(shè)置某些樣式來(lái)告訴該元素 “繼承”它父級(jí)元素的所有已添加的屬性，這樣你就可以避免相當(dāng)多的鍵盤(pán)輸入。
