CSS：Z索引堆疊上下文

Question

今天，我感到有些驚訝，我有下面的HTML標記。 在我的CSS中，將容器設置為position: fixed; z-index: 3 position: fixed; z-index: 3 ，然后我將div#1和div#3 z-index: 2為div#2 z-index: 2 。 我的期望是，當我將div#3向上移動時，它將落后於div#2但令我最大的意外的是，無論其z-index值還是div#2的值，它始終保持在其之上，我感到困惑，為什么這樣做是，也許我不像我想的那樣理解堆棧上下文。 有什么幫助嗎？ 下面我有CSS。

 * { box-sizing: border-box; } body, html, .container { height: 100%; width: 100%; } .container { position: fixed; z-index: 300; } #div1, #div2, #div3 { opacity: 0.7; padding: 10px; } #div1 { border: 1px dashed #996; background-color: #ffc; height: 33.333%; z-index: 1; } #div2 { border: 1px dashed #900; background-color: #fdd; height: 33.333%; z-index: 2; } #div3 { border: 1px dashed #696; background-color: #cfc; height: 33.333%; z-index: 1; transform: translateY(-40px) } 

 <div class='container'> <div id="div1">DIV#1 </div> <div id="div2">DIV#2</div> <div id="div3">DIV#3</div> </div> 

Answer 1

您的元素至少需要位於position:relative才能使用z-index，因為此屬性不適用於靜態位置（默認值）

如您在這里閱讀：

注意：z-index僅適用於定位的元素 （position：absolute，position：relative或position：fixed）。

 * { box-sizing: border-box; } body, html, .container { height: 100%; width: 100%; } .container { position: fixed; z-index: 300; } #div1, #div2, #div3 { position:relative; opacity: 0.7; padding: 10px; } #div1 { border: 1px dashed #996; background-color: #ffc; height: 33.333%; z-index: 1; } #div2 { border: 1px dashed #900; background-color: #fdd; height: 33.333%; z-index: 2; } #div3 { border: 1px dashed #696; background-color: #cfc; height: 33.333%; z-index: 3; transform: translateY(-40px) } 

 <div class='container'> <div id="div1">DIV#1 </div> <div id="div2">DIV#2</div> <div id="div3">DIV#3</div> </div> 

Answer 2

為了使用z-index屬性創建堆疊上下文 ，所討論的元素必須是positioned element 。

z-index CSS屬性指定定位元素及其后代的z順序。

參考： z-index -CSS | MDN

定位元素是除static之外具有聲明的position屬性的任何元素； 這是任何元素的默認位置 。

定位元素的示例：

1. relative （相對）
2. absolute （絕對）
3. fixed （絕對）
4. sticky

參考： position -CSS | MDN（定位類型）

為了證明這一點，在包含父元素.container的嵌套div元素上聲明relative位置，例如：

.container > div {
  position: relative;
}

代碼段演示：

 /* Additional */ .container > div { position: relative; } * { box-sizing: border-box; } body, html, .container { height: 100%; width: 100%; } .container { position: fixed; } #div1, #div2, #div3 { opacity: 0.7; padding: 10px; } #div1 { border: 1px dashed #996; background-color: #ffc; height: 33.333%; z-index: 1; } #div2 { border: 1px dashed #900; background-color: #fdd; height: 33.333%; z-index: 2; } #div3 { border: 1px dashed #696; background-color: #cfc; height: 33.333%; z-index: 1; transform: translateY(-40px) } 

 <div class="container"> <div id="div1">DIV#1 </div> <div id="div2">DIV#2</div> <div id="div3">DIV#3</div> </div> 

有關更多信息： 了解CSS z-index-CSS | MDN

Answer 3

添加position: relative對於div

 * { box-sizing: border-box; } body, html, .container { height: 100%; width: 100%; } .container { position: fixed; z-index: 300; } #div1, #div2, #div3 { opacity: 0.7; padding: 10px; } #div1 { border: 1px dashed #996; background-color: #ffc; height: 33.333%; z-index: 1; position: relative; } #div2 { border: 1px dashed #900; background-color: #fdd; height: 33.333%; position: relative; z-index: 2; } #div3 { border: 1px dashed #696; background-color: #cfc; height: 33.333%; z-index: 1; position: relative; transform: translateY(-40px) } 

 <div class='container'> <div id="div1">DIV#1 </div> <div id="div2">DIV#2</div> <div id="div3">DIV#3</div> </div> 

Answer 4

您做對了，只需添加位置：相對； 元素，以便z-index設置生效。

z-index CSS屬性指定定位元素及其后代的z順序。 MDN-CSS z-index定位的元素是其計算的位置值為相對，絕對，固定或粘滯的元素。 （換句話說，除了靜態以外，什么都沒有。） MDN-CSS位置

 * { box-sizing: border-box; } body, html, .container { height: 100%; width: 100%; } .container { position: fixed; z-index: 300; } #div1, #div2, #div3 { opacity: 0.7; padding: 10px; position: relative; } #div1 { border: 1px dashed #996; background-color: #ffc; height: 33.333%; z-index: 1; } #div2 { border: 1px dashed #900; background-color: #fdd; height: 33.333%; z-index: 2; } #div3 { border: 1px dashed #696; background-color: #cfc; height: 33.333%; z-index: 1; transform: translateY(-40px); } 

 <div class='container'> <div id="div1">DIV#1 </div> <div id="div2">DIV#2</div> <div id="div3">DIV#3</div> </div>