CSS樣式表中的position屬性詳細說明
發(fā)布時間：2009-11-04 00:30:01 作者：佚名 
我要評論
我要評論CSS position屬性使用說明，需要的朋友可以參考下。
在CSS中關(guān)于position定位的內(nèi)容是：
position: relative | absolute | static | fixed
static(靜態(tài)) 沒有特別的設(shè)定，遵循基本的定位規(guī)定，不能通過z-index進行層次分級。
relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態(tài)位置通過 top,bottom,left,right 定位，并且可以通過z-index進行層次分級。
absolute(絕對定位) 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近一個最有定位設(shè)置的父級對象進行絕對定位，如果對象的父級沒有設(shè)置定位屬性，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。
fixed(固定定位)這里所固定的參照對像是可視窗口而并非是body或是父級元素。可通過z-index進行層次分級。
CSS中定位的層疊分級：z-index: auto | namber;
auto 遵從其父對象的定位
namber 無單位的整數(shù)值?？蔀樨摂?shù)
relative(相對定位)只可以在文本流中進行位置的上下左右的移動，雖然他的表現(xiàn)區(qū)脫離了文本流，但是在文本流卻依然為其保留了一席之地，這就好比一個打工的人他到了外地，但是在老家依然有一個專屬于他的位置，這個位置不隨他的移動而改變。這樣很明顯就會空出一塊空白來，如果希望文本流拋棄這個部分就需要用到絕對定位。
absolute(絕對定位)不光脫離了文本流，而且在文本流中也不會給這個絕對定位元素留下專屬空位。這就好比是一個工廠里的職位，如果有一個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過TRBL(TOP、RIGHT、BOTTOM、LEFT簡稱TRBL)來設(shè)置元素，使之處在任何一個位置。在父層position屬性為默認值時，TRBL的坐標原點以body的坐標原點為起始。
關(guān)于position
1. position:static
所有元素的默認定位都是：position:static，這意味著元素沒有被定位，而且在文檔中出現(xiàn)在它應(yīng)該在的位置。
一般來說，不用指定 position:static，除非想要覆蓋之前設(shè)置的定位（也就是說，不繼承父容器的position屬性值！?。。?。
2. position:relative
如果設(shè)定 position:relative，就可以使用 top,bottom,left 和 right 來相對于元素在文檔中應(yīng)該出現(xiàn)的位置來移動這個元素。
意思是元素實際上依然占據(jù)文檔中的原有位置，只是上相對于它在文檔中的原有位置移動了。
3. position:absolute
當指定 position:absolute 時，元素就脫離了文檔(即在文檔中已經(jīng)不占據(jù)位置了)，可以準確的按照設(shè)置的 top,bottom,left 和 right 來定位了。
Inherit (值)屬性：
inherit故名思意是“繼承”的意思。所以它所表達的值也是繼承相關(guān)的了。
通過在特定元素上設(shè)置某些樣式來告訴該元素 “繼承”它父級元素的所有已添加的屬性，這樣你就可以避免相當多的鍵盤輸入。
這可以通過設(shè)置 inherit 來很容易的實現(xiàn)。比如，當重寫 background 屬性的時候，常常會有很多的文字在該屬性中(色彩、圖片的URL地址、位置等)。所以，與其重新寫這些值，你可能僅僅想要考慮中的元素和其父級元素有相同 的背景屬性，一個 inherit 值就可以搞定一切——這顯然大大的節(jié)省了鍵盤輸入。
給大家一個簡單的inherit 小實例你會很明白了：
<html><style>
body { color: red; background: green ;}
h1 { color: yellow; background: blue ;}
p {color: white ; background: black ;}
em {color: inherit ;} /*這個"繼承"是默認的，可以不寫*/
</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進行層次分級。
relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態(tài)位置通過 top,bottom,left,right 定位，并且可以通過z-index進行層次分級。
absolute(絕對定位) 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近一個最有定位設(shè)置的父級對象進行絕對定位，如果對象的父級沒有設(shè)置定位屬性，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。
fixed(固定定位)這里所固定的參照對像是可視窗口而并非是body或是父級元素。可通過z-index進行層次分級。
CSS中定位的層疊分級：z-index: auto | namber;
auto 遵從其父對象的定位
namber 無單位的整數(shù)值?？蔀樨摂?shù)
relative(相對定位)只可以在文本流中進行位置的上下左右的移動，雖然他的表現(xiàn)區(qū)脫離了文本流，但是在文本流卻依然為其保留了一席之地，這就好比一個打工的人他到了外地，但是在老家依然有一個專屬于他的位置，這個位置不隨他的移動而改變。這樣很明顯就會空出一塊空白來，如果希望文本流拋棄這個部分就需要用到絕對定位。
absolute(絕對定位)不光脫離了文本流，而且在文本流中也不會給這個絕對定位元素留下專屬空位。這就好比是一個工廠里的職位，如果有一個工人走了自然會要有別的工人來填充這個位置。而移動出去的部分自然也就成為了自由體。絕對定位將可以通過TRBL(TOP、RIGHT、BOTTOM、LEFT簡稱TRBL)來設(shè)置元素，使之處在任何一個位置。在父層position屬性為默認值時，TRBL的坐標原點以body的坐標原點為起始。
關(guān)于position
1. position:static
所有元素的默認定位都是：position:static，這意味著元素沒有被定位，而且在文檔中出現(xiàn)在它應(yīng)該在的位置。
一般來說，不用指定 position:static，除非想要覆蓋之前設(shè)置的定位（也就是說，不繼承父容器的position屬性值！?。。?。
2. position:relative
如果設(shè)定 position:relative，就可以使用 top,bottom,left 和 right 來相對于元素在文檔中應(yīng)該出現(xiàn)的位置來移動這個元素。
意思是元素實際上依然占據(jù)文檔中的原有位置，只是上相對于它在文檔中的原有位置移動了。
3. position:absolute
當指定 position:absolute 時，元素就脫離了文檔(即在文檔中已經(jīng)不占據(jù)位置了)，可以準確的按照設(shè)置的 top,bottom,left 和 right 來定位了。
Inherit (值)屬性：
inherit故名思意是“繼承”的意思。所以它所表達的值也是繼承相關(guān)的了。
通過在特定元素上設(shè)置某些樣式來告訴該元素 “繼承”它父級元素的所有已添加的屬性，這樣你就可以避免相當多的鍵盤輸入。
這可以通過設(shè)置 inherit 來很容易的實現(xiàn)。比如，當重寫 background 屬性的時候，常常會有很多的文字在該屬性中(色彩、圖片的URL地址、位置等)。所以，與其重新寫這些值，你可能僅僅想要考慮中的元素和其父級元素有相同 的背景屬性，一個 inherit 值就可以搞定一切——這顯然大大的節(jié)省了鍵盤輸入。
給大家一個簡單的inherit 小實例你會很明白了：
<html><style>
body { color: red; background: green ;}
h1 { color: yellow; background: blue ;}
p {color: white ; background: black ;}
em {color: inherit ;} /*這個"繼承"是默認的，可以不寫*/
</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在一些相似使用方面的對比,需要的朋友可以參考下2015-11-06
- positon有4個屬性:static relative absolute fixed，我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什么意思呢？絕對是什么地方的絕對，相對又2014-11-28
- 對于Position、Float我們在平時使用上可以說是使用頻率非常高的兩個CSS屬性，對于這兩個屬性的使用上面可能大多數(shù)人存在一些模糊與不清晰的地方。本文主要對這兩個屬性使用2014-06-14
- position屬性主要有四種屬性值，任何元素的默認position的屬性值均是static,靜態(tài)。這節(jié)課主要講講relative以及absolute，感興趣的朋友可以了解下2013-12-09
css中關(guān)于定位屬性position為fixed的使用記載
當一個div想要定位時，我們第一反應(yīng)是position屬性，而position屬性除了默認值外，還有absolute,relative和fixed，下面有個不錯的示例，不懂的朋友可以參考下2013-11-11- CSS定位中Position是必不可少的，其有四個屬性static、relative、absolute、fixed，下面為大家詳細介紹下，這個四個屬性的使用場合，感興趣的朋友不要錯過2013-10-16
- 定位的話，父DIV設(shè)置position:relative后，子DIV的position:absolute就會相對父DIV作絕對定位，接下來為大家介紹下CSS的position屬性在DIV層中的應(yīng)用2013-10-09
CSS樣式position屬性的一個小實例:z方向三層布局分析
使用CSS樣式中的position屬性實現(xiàn)z方向三層布局效果，本文甚是疑惑，于是乎搜集整理一番，曬出代碼和大家分享一下2012-12-07- 網(wǎng)頁制作Webjx文章簡介：position屬性可以讓你讓你隨意控制一個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個圖片顯示在瀏覽器的左上角.即使出現(xiàn)2009-04-02
- position有五個屬性： static | relative | absolute | fixed | inherit，也許你看到這個標題覺得很簡單，確實這是一篇關(guān)于CSS中Position屬性基礎(chǔ)知識的文章，但是關(guān)于Pos2015-11-27