Stacking context example 1

« CSS « 理解CSS的z-index

堆疊環境範例1

讓我們先從一個基本的例子。根堆疊情況下,我們有兩個div(DIV#1和#DIV 3),兩種相對定位的,但是如果沒有的z-index屬性。裡面DIV#1有一個絕對定位的div#2,而在DIV#3有一個絕對定位的div#4,雙方沒有的z-index屬性。

唯一的堆疊上下文是根上下文。如果沒有Z-指標,要素依次層疊的發生。

堆疊環境範例1

如果DIV#2被分配一個正的(非零和非自動)z索引值,它是上述所有其他的DIV呈現。

堆疊環境範例1

然後,如果DIV#4也被分配比DIV#2的Z指數正z指數越大,它上面的所有其他的DIV DIV,包括2#呈現。

堆疊環境範例1

在最後的例子,你可以看到,DIV#2和#DIV 4不兄弟姐妹,因為它們屬於不同的家長在HTML元素的層次結構。即便如此,DIV#4堆疊相的DIV#2可以通過z索引來控制。碰巧的是,由於DIV#1和#DIV 3不指定任何的z-index值,他們不創造一個堆疊環境。這意味著,所有的內容,包括DIV#2和DIV#4屬於相同根堆疊環境。

在堆疊上下文而言,DIV#1和DIV#3簡單地同化到根元素,將得到的層次結構如下:

  • 根堆疊環境
    • DIV#2(Z-指數1)
    • DIV#4(Z-指數2)
注: DIV#1和#DIV 3不適透亮。重要的是要記住,分配的不透明度小於1到定位的元素隱式創建一個疊加的背景下,就像一個加入的z-index值是非常重要的。這個例子顯示,當父元素不會創建一個堆疊環境會發生什麼。

示例源代碼

<!DOCTYPE HTML PUBLIC“ -  // W3C // DTD XHTML 1.0過渡// EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<HTML>
<HEAD> <風格類型=“文本/ CSS”>

DIV {字體:12px的宋體; }

span.bold {字體重量:大膽的; }

#DIV1,#{DIV3
   高度:80px;
   位置:親屬;
   邊界:1px的虛線#669966;
   背景色:#ccffcc;
   填充左:5px的;
}

#{DIV2
   不透明度:0.8;
   的z-index:1;
   位置:絕對的;
   寬度:150像素;
   高度:200像素;
   頂:20像素;
   左:170px;
   邊界:1px的虛線#990000;
   背景色:#ffdddd;
   文本對齊:中心;
}

#{DIV4
   不透明度:0.8;
   的z-index:2;
   位置:絕對的;
   寬度:200像素;
   高度:70px;
   頂部:65px;
   左:50像素;
   邊界:1px的虛線#000099;
   背景色:#ddddff;
   文本對齊:左;
   填充左:10px的;
}


</風格> </ HEAD>

<BODY>

<br />

<DIV ID =“DIV1”>
<br />的<span class =“黑體”> DIV#1 </ SPAN>
<br />位置:親屬;
   <DIV ID =“DIV2”>
   <br />的<span class =“黑體”> DIV#2 </ SPAN>
   <br />位置:絕對的;
   <br />的z-index:1;
   </ DIV>
</ DIV>

<br />

<DIV ID =“DIV3”>
<br />的<span class =“黑體”> DIV#3 </ SPAN>
<br />位置:親屬;
   <DIV ID =“DIV4”>
   <br />的<span class =“黑體”> DIV#4 </ SPAN>
   <br />位置:絕對的;
   <br />的z-index:2;
   </ DIV>
</ DIV>

</ BODY> </ HTML>

另請參見

原始文檔信息

 

文件標籤與貢獻者

 此頁面的貢獻者: jackblackevo, h140100
 最近更新: jackblackevo,