對(duì)于網(wǎng)站建設(shè)所有定位,最后都不免遇到這樣一種情況:兩個(gè)元素試圖放在同一個(gè)位置上。顯然,其中一個(gè)必須蓋住另一個(gè)——不過(guò),如何控制哪個(gè)元素放在“上層”呢?這就引人了屬性z-index.
z-index
值:<integer> | auto | inherit
初始值auto
應(yīng)用于定位元素
繼承性 無(wú)
計(jì)算值 根據(jù)指定確定
利用z-index,可以改變于網(wǎng)站建設(shè)元素相互覆蓋的順序。這個(gè)屬性的名字由坐標(biāo)系統(tǒng)得來(lái),其中從左向右是x軸,從上到下是y軸。在這種情況下,第三個(gè)軸一即從前向后,或者如果網(wǎng)頁(yè)設(shè)計(jì)人員愿意,也可以理解為越來(lái)越遠(yuǎn)離用戶(hù)——?jiǎng)t稱(chēng)為z軸。因此,使用z-index 為元素指定沿z軸的值,并相應(yīng)表示。圖10-52描述了這個(gè)坐標(biāo)系。
在這個(gè)坐標(biāo)系中,有較高z-index值的元素比z-index值較低的元素離讀者更近。這會(huì)導(dǎo)致有較高z-index值的元素覆蓋其他元素,如圖10-53所示,這是圖10-52的正面圖。這也稱(chēng)為疊放。
所有整數(shù)都可以用作為z-index的值,包括負(fù)數(shù)。如果為元素指定一個(gè)負(fù)z-index值,會(huì)將其移到到離讀者更遠(yuǎn)的位置。也就是說(shuō),它會(huì)移到疊放棧的更低層??紤]以下樣式,如圖10-54所示:
p#first {position: absolute; Cop: 0; left: 0;
width: 20%; height: 10em; z-index: 8;}
p#second {position: absolute; top: 0; left: 10%;
width: 30%; height: 5em; z-index: 4;}
圖10-52: z-index疊放的概念視圖
圖10-53:元素如何疊放
p#third {position: absolute; cop: 15%; left: 5%;
width: 15%; height: 10em; z-index: 1;}
p#fourth {position: absolute; top: 10%; left: 15%;
width: 40%; height: l0em; z-index: 0;}
圖10-54:疊放元素可能相互重疊
每個(gè)網(wǎng)站建設(shè)元素都按照其樣式定位,不過(guò),z-index值修改了以往的疊放順序。假設(shè)段落按數(shù)字順序指定,一個(gè)合理的疊放順序可能是(從低到高)p#first、p#second. pttthird、p#fourth。這會(huì)把p#first放在另外三個(gè)元素的下面,而把p#fourth放在所有元素的最前面?,F(xiàn)在,因?yàn)橛衵-index屬性,疊放順序則在你的控制之下。
如前例所示,沒(méi)有特別要求z-index值是連續(xù)的??梢灾付ㄈ魏握麛?shù)。如果想確定一個(gè)元素必定在所有其他元素的前面,可以使用以下規(guī)則:z-index: 100000。大多數(shù)情況下,這都能滿(mǎn)足你的要求,不過(guò),如果把另一個(gè)元素的z-index聲明為100001 (或更高),該元素則會(huì)出現(xiàn)在前面。
—旦為一個(gè)元素指定了z-index值,該元素就會(huì)建立自己的局部疊放上下文。這意味著,元素的所有后代相對(duì)于該祖先元素都有其自己的疊放順序。這非常類(lèi)似于元素建立新包含塊的方式。給定以下樣式,可以看到如圖10-55所示的結(jié)果:
p {border: 1px solid; background:#DDD; margin: 0;}
b (background:#808080;}
em {background:#BBB;}
#one (position: absolute; cop: 0; left: 0; width: 50%; height: 10em; z-index: 10;}
#two {position: absolute,- top: 5em; left: 25%; width: 50%; height: 10em; z-index: 7;}
#Chree {position: absolute; top: Hem; left: 0; widtrh: 50%; height: 10em; z-index: 1;}
#one b {position: absolute; right:-5em; top: 4em; width: 20em; z-indexs -404;}
#two b {position: absolute; right:-3em; top: auto; z-index: 36;}
#two em tposition: absolute; bottom:-0.75em; left: 7em; right:-2em; z-index:-42;}
Kthree b {position: absolute; left: 3em; top: 3.5em; width: 25em; z-index: 23;}
圖10-55:定位元素建立局部疊放上下文
注意b和em元素在疊放順序中的位置。當(dāng)然,這些元素都相對(duì)于其父元素準(zhǔn)確定位,不過(guò),要特別注意P#two的子元素。盡管b元素在其父元素前面,而em在后面,但它們都在p#three的前面!這是因?yàn)閦-index值36和-42都相對(duì)于p#two,而不是相對(duì)于總的文檔。從某種意義上講,P#two及其所有子元素都有共同的z-index值7,而在這個(gè)P#two上下文中各元素又有其自己的“次級(jí)”z-index。
換句話說(shuō),就好像b元素的z-index為7,36,而em的z-index值為7,-42,這些只是網(wǎng)站建設(shè)的反映概念值,規(guī)范中沒(méi)有相應(yīng)的規(guī)定。不過(guò),這樣的系統(tǒng)有助于說(shuō)明如何確定總的迭放順序。請(qǐng)考慮:
p#one 10
p#one b 10,-404
p#two b 7,36
p#two 7
p#two em 7,-42
p#three b 1,23
p#three 1
這個(gè)概念框架準(zhǔn)確地描述了這些元素以何種順序疊放。從這個(gè)疊放順序來(lái)看,盡管一個(gè)網(wǎng)站建設(shè)的元素后代可能在該元素的上面或下面,但它們與其祖先元素都?xì)w為一組。
如果一個(gè)元素為其后代元素建立了疊放上下文,而且該元素位于此上下文z軸的0位置上,也是如此。因此,可以將框架擴(kuò)展如下:
P#one 10,0
p#one b 10,-404
P#two b 7,36
P#two 7,0
P#two em 7,-42
p#three b 1,23
p#three 1,0
還有一個(gè)值要分析。規(guī)范對(duì)默認(rèn)值auto有以下說(shuō)明:
當(dāng)前疊放上下文中生成框的棧層次與其父框的層次相同。這個(gè)框不會(huì)建立新的局部4放上下文。(CSS2.1: 9.9.1)
因此,如果元素設(shè)置為z-index: auto,可以將其處理為z-index: 0。不過(guò)現(xiàn)在你可能想知道,如果一個(gè)元素是初始包含塊疊放上下文的一部分,而且其z-index值為負(fù),此時(shí)會(huì)發(fā)生什么情況。例如,可以想想看以下規(guī)則會(huì)得到什么結(jié)果:
<body>
<p style="position: absolute; z-index:-1;">Where am I?</p>
</body>
根據(jù)疊放規(guī)則,body元素與其父元素框在同一個(gè)迭放上下文中,因此將是0。它不會(huì)建立一個(gè)新的疊放上下文,所以絕對(duì)定位的P元素與body元素置于相同的迭放上下文中(即初始包含塊的疊放上下文)。換句話說(shuō),段落放在body元素的后面(被body元素蓋?。?。如果body有不透明的背景,這個(gè)段落會(huì)消失。
不過(guò),只是CSS2中會(huì)如此。在網(wǎng)站建設(shè)CSS2.1中,疊放規(guī)則有所改變,要求元素絕對(duì)不會(huì)迭放在其鲞放上下文的背景之下。換句話說(shuō),考慮以下情況,body元素為其后代建立了一個(gè)包含塊(例如,假設(shè)它是相對(duì)定位元素)。作為body元素后代的一個(gè)絕對(duì)定位元素就不能疊放在body的背景之下,不過(guò)可以迭放在body的內(nèi)容下面。
寫(xiě)作本書(shū)時(shí),即使將body和html元素都設(shè)置為有透明的背景,Mozilla和相關(guān)瀏覽器也會(huì)完全隱藏段落。這種做法是錯(cuò)誤的。即使body有背景,其他用戶(hù)代理也會(huì)把段落放在body的背景之上。根據(jù)CSS2.1,這才是正確的行為。由于用戶(hù)代理的做法不同,所以z-index值為負(fù)時(shí)會(huì)導(dǎo)致不可預(yù)料的后果,所以使用要小心,
當(dāng)前文章標(biāo)題:網(wǎng)頁(yè)設(shè)計(jì)中Z軸上的放置
當(dāng)前URL:http://www.americanwasteexpansions.com/news/wzzz/Z axis-placed.html