深入了解Position屬性
1.1 position簡(jiǎn)介
CSS中的定位模式規(guī)定了一個(gè)盒子在總體的布局上應(yīng)該處于什么位置以及對(duì)周圍的盒子會(huì)有什么影響。該模式包括了常規(guī)文檔流,浮動(dòng),和幾種類型的 position 定位的元素。
其中,CSS position 屬性可以取5種值:
? position: absolute
? position: relative
? position: fixed
? position: static
? position: inherit
static 是 position 默認(rèn)的屬性值。任何應(yīng)用了 position:static 的元素都處于常規(guī)文檔流中。它處于什么位置以及它如何影響周邊的元素都是由盒模型所決定的。
一個(gè) static 定位的元素會(huì)忽略所有 top,right,bottom,left 以及 z-index 屬性所聲明的值。為了讓你的元素能使用這五個(gè)屬性,你需要先為它的 position 屬性應(yīng)用這三個(gè)值的其中之一: absolute,relative,fixed
position 值為 inherit 的元素和其他所有屬性的繼承值一樣,元素會(huì)繼承父元素的 position 值。
1.2 絕對(duì)定位
絕對(duì)定位的元素會(huì)完全地從常規(guī)文檔流中脫離。對(duì)于包圍它的元素而言,它會(huì)將該絕對(duì)定位元素視為不存在。就好像 display 屬性被設(shè)為 none 一樣。如果你想要保持它所占有的位置而不被其他元素所填充,那么你需要使用其他的定位方式。
你可以通過 top, right, bottom, 和 left 四個(gè)屬性來設(shè)置絕對(duì)定位元素的位置。但你通常只會(huì)設(shè)置它們其中的兩個(gè),top 或者 bottom,以及 left 或者 right。默認(rèn)地它們的值都為 auto。
弄明白絕對(duì)定位的關(guān)鍵是知道它的起點(diǎn)在哪里。如果 top 被設(shè)置為20px,那么你要知道這20px是從哪里開始計(jì)算的。
一個(gè)絕對(duì)定位的元素的起點(diǎn)位置是相對(duì)于它的第一個(gè) position 值不為 static 的父元素而言的。如果在它的父元素鏈上沒有滿足條件的父元素,那么絕對(duì)定位元素則會(huì)相對(duì)于文檔窗口來進(jìn)行定位。
當(dāng)你在一個(gè)元素的樣式上設(shè)置 position:absolute 意味著需要考慮父元素,并且如果父元素的 position 值不為 static ,那么絕對(duì)定位元素的起點(diǎn)為父元素的左上角位置。
如果父元素沒有應(yīng)用除了 static 以外的 position 定位,那么它會(huì)檢查父元素的父元素是否有應(yīng)用非 static 定位。如果該元素應(yīng)用了定位,那么它的左上角便會(huì)成為絕對(duì)元素的起點(diǎn)位置。如果沒有則會(huì)繼續(xù)向上遍歷DOM直到找到一個(gè)定位元素或者尋找失敗以到達(dá)最外層的瀏覽器窗口。
1.3相對(duì)定位
相對(duì)定位的元素也是根據(jù) top, right, bottom, 和 left 四個(gè)屬性來決定自己的位置的。但只是相對(duì)于它們?cè)瓉硭幱诘奈恢眠M(jìn)行移動(dòng)。在某種意義上來說,為元素設(shè)置相對(duì)定位和為元素添加 margin 有點(diǎn)相似,但也有一個(gè)重要的區(qū)別。區(qū)別就是在圍繞在相對(duì)定位元素附近的元素會(huì)忽略相對(duì)定位元素的移動(dòng)。
我們可以把它看做是一張圖片的重像從真實(shí)的圖片的位置開始進(jìn)行了一點(diǎn)移動(dòng)。它原始圖片所占據(jù)的位置仍然保留,但我們已經(jīng)沒法再看到它,只能看到它的重像。這樣就讓元素之間可以進(jìn)行位置的重疊,因?yàn)橄鄬?duì)定位元素能夠移動(dòng)到其他元素所占據(jù)的空間中。
相對(duì)定位元素離開了正常文檔流,但仍然影響著圍繞著它的元素。那些元素表現(xiàn)地就好像這個(gè)相對(duì)定位元素仍然在正常文檔流當(dāng)中。
我們無需再追問這個(gè)相對(duì)的位置是在哪里。因?yàn)檫@個(gè)相對(duì)位置很顯然是正常的文檔流。相對(duì)定位有點(diǎn)兒像為元素添加了 margin ,對(duì)相鄰元素來說卻像是什么都沒發(fā)生過。但實(shí)際上并沒有增加任何的 margin 。
1.4 固定定位
固定定位的行為類似于絕對(duì)定位,但也有一些不同的地方。
首先,固定定位總是相對(duì)于瀏覽器窗口來進(jìn)行定位的,并且通過哪些屬性的 top, right, bottom, 和 left 屬性來決定其位置。它拋棄了它的父元素,它就是定位中表現(xiàn)地有點(diǎn)兒反叛。
固定定位的元素是固定的。它們并不隨著頁(yè)面的滾動(dòng)而移動(dòng)。你可以告訴元素它所處的位置并永遠(yuǎn)不再移動(dòng)。
在某種意義上說固定定位元素有點(diǎn)兒類似固定的背景圖片,只不過它的外層容器塊總是瀏覽器窗口罷了。如果你在 body 中設(shè)置一個(gè)固定的背景圖片,那么它與一個(gè)固定定位的元素的行為是非常像的,只不過在位置上的精度會(huì)略少一些。
1.5 z-index
HTML頁(yè)面是一個(gè)二維平面,它具有寬度和高度,但我們可以用 z-index將頁(yè)面帶入三維的世界中。
由上圖可知,高的 z-index 位于低的 z-index 的上面并朝頁(yè)面的上方運(yùn)動(dòng)。相反地,一個(gè)低的 z-index 在高的 z-index 的下面并朝頁(yè)面下方運(yùn)動(dòng)。
沒有的 z-index 的話,定位元素會(huì)有點(diǎn)兒麻煩。因?yàn)?z-index 能讓一個(gè)定位元素位于另一個(gè)元素的上方或者下方,這或許能讓你做出點(diǎn)創(chuàng)造性的東西。所有的元素的默認(rèn)的 z-index 值都為0,并且我們可以對(duì) z-index 使用負(fù)值。
1.6 定位的問題
對(duì)于定位元素來說由幾個(gè)比較常見的問題,都值得我們好好了解。
(1)你不能在同一個(gè)屬性當(dāng)中應(yīng)用定位屬性和浮動(dòng)。因?yàn)閷?duì)使用什么樣的定位方案來說,兩者的指令是相沖突的。如果你把兩個(gè)屬性都添加到一個(gè)相同的元素上,那么CSS中較后的那個(gè)屬性會(huì)覆蓋前面的。
(2)Margin 不會(huì)在絕對(duì)元素上折疊。假設(shè)你具有一個(gè) margin-bottom 為20px的段落。在段落后面是一個(gè)具有30px的 margin-top 的圖片。那么段落和圖片之間的空間不會(huì)是50px(20px+30px)而是30px(30px > 20px)。這就是所謂的外邊距合并,兩個(gè) margin 會(huì)合并(折疊)成一個(gè) margin。
絕對(duì)定位元素則不會(huì)像那樣進(jìn)行 margin 的折疊。
(3)IE在 Z-index 上有一些BUG。在IE 6中 select 元素總是處于堆疊層級(jí)的最上方而不管它的 z-index 和其他元素的 z-index 是多少。
IE 6和IE 7在堆疊層級(jí)上又有另外一個(gè)問題。IE 6由最外層的定位元素的層級(jí)來決定哪一組的元素處于層級(jí)的最上面,而不是每一個(gè)單獨(dú)的元素自身的層級(jí)決定。
本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!
作者:傳智播客UI培訓(xùn)學(xué)院
首發(fā):http://m.fskzgqt.cn/ui