Z-index 堆叠上下文

Question

我遇到了z-index的问题，并不像听起来那么简单

基本上阅读了我找到的所有相关内容后，我仍然无法找到解决方案。所以这是我的问题：

<div id="first">
 <div id="middlelayer">
   2
 </div> 
</div>
<div id="second">
  <div id="toplayer">
    1
  </div>
  <div id="lowestlayer">
    3
  </div>
</div>

我想要另一个父级 (#middlelayer) 的 Div 坐在另外两个 Div 之间（#toplayer 和 #lowestlayer）。我基本上对 z-indices 的每个组合进行了实验，还尝试了不透明度的解决方法：.99，在此处描述：

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

到目前为止似乎没有任何效果，希望你能帮助我。

非常感谢您！

Answer 1

.toplayer {
  width: 120px;
  background-color: green;
  position: fixed;
  z-index: 3;
}

#middlelayer {
  width: 140px;
  background-color: blue;
  position: fixed;
  z-index: 2;
}

#lowestlayer {
  width: 160px;
  background-color: yellow;
  position: fixed;
}

<div id="first" >      
        <div id="middlelayer">
          middle
        </div>
</div>
<div id="second">
  <div id="second2">
                <div id="lowestlayer">
                   low
                </div>       
                <div class="toplayer">
                    top                   
                </div>
  </div>
</div>

我刚刚将 z-index:1 到 z-index:3 添加到每个元素，它似乎产生了预期的效果。

编辑：

从我的答案中删除了 JSFiddle 并将其替换为代码片段。

Answer 2

我认为这就是您所需要的。请检查以下代码。

#lowestlayer {
  opacity: .99; 
}

#lowestlayer, #middlelayer, #toplayer {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

#lowestlayer {
  z-index: 1;
  top: 20px;
  left: 20px;
  background: red;
  width: 200px;
  height: 200px;
}

#middlelayer {
  top: 45px;
  left: 45px;
  background: green;
  z-index: 2;
  width: 150px;
  height: 150px;
}

#toplayer {
  top: 70px;
  left: 70px;
  background: blue;
  z-index: 3;
  width: 100px;
  height: 100px;
}

<div id="first">
 <div id="middlelayer">
   2
 </div> 
</div>
<div id="second">
  <div id="toplayer">
    1
  </div>
  <div id="lowestlayer">
    3
  </div>
</div>

Answer 3

这似乎不是 z-index 问题，而是定位问题之一。由于您使用的是 fixed 定位，请记住元素是相对于视口定位的。要获得你想要的结果，设置为 top，一个设置为 bottom，最后一个（需要居中）使用这个名为 absolute centering.

的小技巧

这是您可以在 JSFiddle 上看到的示例...

https://jsfiddle.net/kennethcss/smejLps4/

更新：

如果想要的结果只是 "Layer" 您只需要像这样应用 z-index 的元素...

JSFiddle

Z-index 堆叠上下文

Z-index stacking context

html

css

z-index