<tt id="kjox3"><noscript id="kjox3"><samp id="kjox3"></samp></noscript></tt><tt id="kjox3"><li id="kjox3"><var id="kjox3"></var></li></tt><cite id="kjox3"><noscript id="kjox3"><delect id="kjox3"></delect></noscript></cite>

<source id="kjox3"><menuitem id="kjox3"></menuitem></source>

  • <rt id="kjox3"></rt>
      <rp id="kjox3"></rp>

    1. <cite id="kjox3"></cite>
        <tt id="kjox3"><form id="kjox3"><delect id="kjox3"></delect></form></tt><rp id="kjox3"><meter id="kjox3"><button id="kjox3"></button></meter></rp>

      1. <tt id="kjox3"></tt>

        <rt id="kjox3"><meter id="kjox3"></meter></rt>
      2. <b id="kjox3"><form id="kjox3"><label id="kjox3"></label></form></b>

          網頁設計中Z軸上的放置

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

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

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

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

          網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
          鸭子tv国产在线永久播放