網頁設計中Z軸上的放置

  • 2019-03-21 17:52:59
  • 閱讀次數:
  • 作者:盈嵐科技小編
  • 來源:http://www.thewannabehomesteader.net

對于網站建設所有定位,最后都不免遇到這樣一種情況:兩個元素試圖放在同一個位置上。顯然,其中一個必須蓋住另一個——不過,如何控制哪個元素放在“上層”呢?這就引人了屬性z-index.

z-index

值:<integer> | auto | inherit

初始值auto

應用于定位元素

繼承性 無

計算值 根據指定確定

利用z-index,可以改變于網站建設元素相互覆蓋的順序。這個屬性的名字由坐標系統得來,其中從左向右是x軸,從上到下是y軸。在這種情況下,第三個軸一即從前向后,或者如果網頁設計人員愿意,也可以理解為越來越遠離用戶——則稱為z軸。因此,使用z-index 為元素指定沿z軸的值,并相應表示。圖10-52描述了這個坐標系。

在這個坐標系中,有較高z-index值的元素比z-index值較低的元素離讀者更近。這會導致有較高z-index值的元素覆蓋其他元素,如圖10-53所示,這是圖10-52的正面圖。這也稱為疊放。

所有整數都可以用作為z-index的值,包括負數。如果為元素指定一個負z-index值,會將其移到到離讀者更遠的位置。也就是說,它會移到疊放棧的更低層??紤]以下樣式,如圖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:疊放元素可能相互重疊

每個網站建設元素都按照其樣式定位,不過,z-index值修改了以往的疊放順序。假設段落按數字順序指定,一個合理的疊放順序可能是(從低到高)p#first、p#second. pttthird、p#fourth。這會把p#first放在另外三個元素的下面,而把p#fourth放在所有元素的最前面?,F在,因為有z-index屬性,疊放順序則在你的控制之下。

如前例所示,沒有特別要求z-index值是連續的??梢灾付ㄈ魏握麛?。如果想確定一個元素必定在所有其他元素的前面,可以使用以下規則:z-index: 100000。大多數情況下,這都能滿足你的要求,不過,如果把另一個元素的z-index聲明為100001 (或更高),該元素則會出現在前面。

—旦為一個元素指定了z-index值,該元素就會建立自己的局部疊放上下文。這意味著,元素的所有后代相對于該祖先元素都有其自己的疊放順序。這非常類似于元素建立新包含塊的方式。給定以下樣式,可以看到如圖10-55所示的結果:

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元素在疊放順序中的位置。當然,這些元素都相對于其父元素準確定位,不過,要特別注意P#two的子元素。盡管b元素在其父元素前面,而em在后面,但它們都在p#three的前面!這是因為z-index值36和-42都相對于p#two,而不是相對于總的文檔。從某種意義上講,P#two及其所有子元素都有共同的z-index值7,而在這個P#two上下文中各元素又有其自己的“次級”z-index。

換句話說,就好像b元素的z-index為7,36,而em的z-index值為7,-42,這些只是網站建設的反映概念值,規范中沒有相應的規定。不過,這樣的系統有助于說明如何確定總的迭放順序。請考慮:

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

這個概念框架準確地描述了這些元素以何種順序疊放。從這個疊放順序來看,盡管一個網站建設的元素后代可能在該元素的上面或下面,但它們與其祖先元素都歸為一組。

如果一個元素為其后代元素建立了疊放上下文,而且該元素位于此上下文z軸的0位置上,也是如此。因此,可以將框架擴展如下:

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

還有一個值要分析。規范對默認值auto有以下說明:

當前疊放上下文中生成框的棧層次與其父框的層次相同。這個框不會建立新的局部4放上下文。(CSS2.1: 9.9.1)

因此,如果元素設置為z-index: auto,可以將其處理為z-index: 0。不過現在你可能想知道,如果一個元素是初始包含塊疊放上下文的一部分,而且其z-index值為負,此時會發生什么情況。例如,可以想想看以下規則會得到什么結果:

<body>

<p style="position: absolute; z-index:-1;">Where am I?</p>

</body>

根據疊放規則,body元素與其父元素框在同一個迭放上下文中,因此將是0。它不會建立一個新的疊放上下文,所以絕對定位的P元素與body元素置于相同的迭放上下文中(即初始包含塊的疊放上下文)。換句話說,段落放在body元素的后面(被body元素蓋?。?。如果body有不透明的背景,這個段落會消失。

不過,只是CSS2中會如此。在網站建設CSS2.1中,疊放規則有所改變,要求元素絕對不會迭放在其鲞放上下文的背景之下。換句話說,考慮以下情況,body元素為其后代建立了一個包含塊(例如,假設它是相對定位元素)。作為body元素后代的一個絕對定位元素就不能疊放在body的背景之下,不過可以迭放在body的內容下面。

寫作本書時,即使將body和html元素都設置為有透明的背景,Mozilla和相關瀏覽器也會完全隱藏段落。這種做法是錯誤的。即使body有背景,其他用戶代理也會把段落放在body的背景之上。根據CSS2.1,這才是正確的行為。由于用戶代理的做法不同,所以z-index值為負時會導致不可預料的后果,所以使用要小心,

當前文章標題:網頁設計中Z軸上的放置

當前URL:http://www.thewannabehomesteader.net/news/wzzz/Z axis-placed.html

上一篇:網頁設計中替換元素的放置和大小

下一篇:網頁設計中的固定定位

網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
亚洲娇小与黑人巨大交_国产黑色丝袜视频在线观_国产精品1024在线观看_2019最新国产不卡a国内