CSS樣式表中的position屬性詳細(xì)說明
發(fā)布時(shí)間：2009-11-04 00:30:01 作者：佚名 
我要評(píng)論
我要評(píng)論CSS position屬性使用說明，需要的朋友可以參考下。
在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 屬性）。
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 屬性）。
相關(guān)文章
- 這篇文章主要介紹了CSS的position屬性的完全解析,包括position和overflow在一些相似使用方面的對(duì)比,需要的朋友可以參考下2015-11-06
- positon有4個(gè)屬性:static relative absolute fixed，我們都知道absolute是絕對(duì)定位，relative是相對(duì)定位，但是這個(gè)絕對(duì)與相對(duì)是什么意思呢？絕對(duì)是什么地方的絕對(duì)，相對(duì)又2014-11-28
對(duì)CSS中的Position、Float屬性的一些深入探討
對(duì)于Position、Float我們?cè)谄綍r(shí)使用上可以說是使用頻率非常高的兩個(gè)CSS屬性，對(duì)于這兩個(gè)屬性的使用上面可能大多數(shù)人存在一些模糊與不清晰的地方。本文主要對(duì)這兩個(gè)屬性使用2014-06-14- position屬性主要有四種屬性值，任何元素的默認(rèn)position的屬性值均是static,靜態(tài)。這節(jié)課主要講講relative以及absolute，感興趣的朋友可以了解下2013-12-09
css中關(guān)于定位屬性position為fixed的使用記載
當(dāng)一個(gè)div想要定位時(shí)，我們第一反應(yīng)是position屬性，而position屬性除了默認(rèn)值外，還有absolute,relative和fixed，下面有個(gè)不錯(cuò)的示例，不懂的朋友可以參考下2013-11-11- CSS定位中Position是必不可少的，其有四個(gè)屬性static、relative、absolute、fixed，下面為大家詳細(xì)介紹下，這個(gè)四個(gè)屬性的使用場(chǎng)合，感興趣的朋友不要錯(cuò)過2013-10-16
- 定位的話，父DIV設(shè)置position:relative后，子DIV的position:absolute就會(huì)相對(duì)父DIV作絕對(duì)定位，接下來為大家介紹下CSS的position屬性在DIV層中的應(yīng)用2013-10-09
CSS樣式position屬性的一個(gè)小實(shí)例:z方向三層布局分析
使用CSS樣式中的position屬性實(shí)現(xiàn)z方向三層布局效果，本文甚是疑惑，于是乎搜集整理一番，曬出代碼和大家分享一下2012-12-07- 網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：position屬性可以讓你讓你隨意控制一個(gè)特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個(gè)圖片顯示在瀏覽器的左上角.即使出現(xiàn)2009-04-02
談?wù)勀銓?duì)css中position五個(gè)屬性的理解
position有五個(gè)屬性： static | relative | absolute | fixed | inherit，也許你看到這個(gè)標(biāo)題覺得很簡(jiǎn)單，確實(shí)這是一篇關(guān)于CSS中Position屬性基礎(chǔ)知識(shí)的文章，但是關(guān)于Pos2015-11-27