• 網頁設計中Z軸上的放置

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

    對于網站建設所有定位,最后都不免遇到這樣一種情況:兩個元素試圖放在同一個位置上。顯然,其中一個必須蓋住另一個——不過,如何控制哪個元素放在“上層”呢?這就引人了屬性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.dlbfgs.cn/news/wzzz/Z axis-placed.html

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

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

    網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
    一级免费毛片,在免费AV网,日韩AV在线直播,午夜无码国产