CSS樣式表中的position屬性詳細(xì)說明
2024-07-11 08:45:42
供稿：網(wǎng)友
在CSS中關(guān)于position定位的內(nèi)容是：
position: relative | absolute | static | fixed
static(靜態(tài)) 沒有特別的設(shè)定，遵循基本的定位規(guī)定，不能通過z-index進(jìn)行層次分級(jí)。
relative(相對(duì)定位) 對(duì)象不可層疊、不脫離文檔流，參考自身靜態(tài)位置通過 top,bottom,left,right 定位，并且可以通過z-index進(jìn)行層次分級(jí)。
absolute(絕對(duì)定位) 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近一個(gè)最有定位設(shè)置的父級(jí)對(duì)象進(jìn)行絕對(duì)定位，如果對(duì)象的父級(jí)沒有設(shè)置定位屬性，absolute元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位，可以通過z-index進(jìn)行層次分級(jí)。
fixed(固定定位)這里所固定的參照對(duì)像是可視窗口而并非是body或是父級(jí)元素?？赏ㄟ^z-index進(jìn)行層次分級(jí)。
CSS中定位的層疊分級(jí)：z-index: auto | namber;
auto 遵從其父對(duì)象的定位
namber 無單位的整數(shù)值?？蔀樨?fù)數(shù)
relative(相對(duì)定位)只可以在文本流中進(jìn)行位置的上下左右的移動(dòng)，雖然他的表現(xiàn)區(qū)脫離了文本流，但是在文本流卻依然為其保留了一席之地，這就好比一個(gè)打工的人他到了外地，但是在老家依然有一個(gè)專屬于他的位置，這個(gè)位置不隨他的移動(dòng)而改變。這樣很明顯就會(huì)空出一塊空白來，如果希望文本流拋棄這個(gè)部分就需要用到絕對(duì)定位。
absolute(絕對(duì)定位)不光脫離了文本流，而且在文本流中也不會(huì)給這個(gè)絕對(duì)定位元素留下專屬空位。這就好比是一個(gè)工廠里的職位，如果有一個(gè)工人走了自然會(huì)要有別的工人來填充這個(gè)位置。而移動(dòng)出去的部分自然也就成為了自由體。絕對(duì)定位將可以通過TRBL(TOP、RIGHT、BOTTOM、LEFT簡(jiǎn)稱TRBL)來設(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，這意味著元素沒有被定位，而且在文檔中出現(xiàn)在它應(yīng)該在的位置。
一般來說，不用指定 position:static，除非想要覆蓋之前設(shè)置的定位（也就是說，不繼承父容器的position屬性值?。。。?。
2. position:relative
如果設(shè)定 position:relative，就可以使用 top,bottom,left 和 right 來相對(duì)于元素在文檔中應(yīng)該出現(xiàn)的位置來移動(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 來定位了。
Inherit (值)屬性：
inherit故名思意是“繼承”的意思。所以它所表達(dá)的值也是繼承相關(guān)的了。
通過在特定元素上設(shè)置某些樣式來告訴該元素 “繼承”它父級(jí)元素的所有已添加的屬性，這樣你就可以避免相當(dāng)多的鍵盤輸入。
這可以通過設(shè)置 inherit 來很容易的實(shí)現(xiàn)。比如，當(dāng)重寫 background 屬性的時(shí)候，常常會(huì)有很多的文字在該屬性中(色彩、圖片的URL地址、位置等)。所以，與其重新寫這些值，你可能僅僅想要考慮中的元素和其父級(jí)元素有相同 的背景屬性，一個(gè) inherit 值就可以搞定一切——這顯然大大的節(jié)省了鍵盤輸入。
給大家一個(gè)簡(jiǎn)單的inherit 小實(shí)例你會(huì)很明白了：
<html><style>
body { color: red; background: green ;}
h1 { color: yellow; background: blue ;}
p {color: white ; background: black ;}
em {color: inherit ;} /*這個(gè)"繼承"是默認(rèn)的，可以不寫*/
</style><body>
<h1>aaa <em>繼承的文字</em> aaa</h1>
<em>繼承的文字</em>
<p>P中間的文字</p>
<em>繼承的文字</em>
</body></html>
很可惜的是inherit 值在IE6和IE7不被支持（除了用于 direction (文字方向) 和 visibility 屬性）。
