z-index 不适用于 parents 处于固定位置的元素

Question

我有一个网络应用程序，有上下元素（div），它们都有position: fixed。这些元素中的每一个都有 child 个元素（弹出窗口），它们也有 position: fixed.

我想将上面的弹出窗口放置到 parent 个元素中。但是，由于我使用的是 position: fixed，因此 z-index 属性无法正常工作，因为它是从 parent 继承而来的。

我看到 Stack-overflow 中提出了类似的问题，但是其中 none 提供了此问题的解决方案。

参见 html/css 处：https://jsfiddle.net/pLsdspon/

<html>
<head></head>
<body style="height: 100%;">

  <div style="
        background-color: red;
     position: fixed;
     display: block;
     width: 100%;
     height: 50%;
     top: 0%;   
     z-index: 2; ">
Top
    <div style="   
      background-color: pink;
      position: fixed;
      display: block;
      width: 80px;
      height: 200px;
      top: 40%;
      left: 100px;
      z-index: 20; ">
      PopUp-Top - Need to be on top!
    </div>
  </div>

  <div style="
     background-color: green;
     position: fixed;
     display: block;
     width: 100%;
     height: 50%;
     top: 50%;
     z-index: 2; ">
Bottom
    <div style="  
      background-color: lightgreen;
      position: fixed;
      display: block;
      width: 80px;
      height: 200px;
      top: 40%;
      left: 200px;
      z-index: 20; ">
      PopUp-Bottom - Need to be on top!
    </div>
  </div>
</body>
</html>

Answer 1

z-index 没有按照您希望的方式工作，因为您将 div 嵌套在 div 中，而不是因为您将位置设置为固定。为什么不将弹出窗口 div 放在其他弹出窗口的外面（顶部）？ https://jsfiddle.net/7efx38um/1/

<html>
<head></head>
<body style="height: 100%;">

 <div style="
   background-color: red;
   position: fixed;
   display: block;
   width: 100%;
   height: 50%;
   top: 0%;   
   z-index: 1;
   ">
   Top
 </div>
  <div style="   
   background-color: pink;
   position: fixed;
   display: block;
   width: 80px;
   height: 200px;
   top: 40%;
   left: 100px;
   z-index: 20;
   ">
   PopUp-Top - Need to be on top!
  </div>
  

 
 <div style="
   background-color: green;
   position: fixed;
   display: block;
   width: 100%;
   height: 50%;
   top: 50%;
   z-index: 1;
   ">
   Bottom
    </div>
  <div style="  
   background-color: lightgreen;
   position: fixed;
   display: block;
   width: 80px;
   height: 200px;
   top: 40%;
   left: 200px;
   z-index: 20;
   ">
   PopUp-Bottom - Need to be on top!
  </div>

 

</body>
</html>

另外，如果您希望横幅和弹出窗口 div 彼此位于同一位置，您可以在两者周围创建虚拟 div，这样弹出窗口就不会使用与横幅相同的样式 ;)

'

Answer 2

简单的解决方案是我正在尝试做的事情根本无法通过。

#Krypton 的回答确实通过改变 html 解决了这个问题，但是在我的情况下改变 html 顺序是不可能的。

元素的顺序称为Stacking Order，堆叠顺序为：
1. 如果没有 z-index 或位置，则堆叠顺序与 html 标记顺序相同。
2. 所有定位元素（relative、absolute 和fixed）出现在所有none 定位元素（static）之上。
3. z-index 只作用于定位元素，它会创建Stacking Context。

堆叠上下文
如果满足以下条件之一，则具有共同父元素的元素组会创建 Stacking Context：
1. 根文档元素（<html> 元素）。
2. 带z-index
的定位元素 3. 不透明度小于 1 的元素 （大多数 Web 开发人员不知道）
Stacking Context 中的所有元素按堆叠顺序一起移动，这意味着如果元素a在质押上下文A中，不能在元素b之上在质押上下文B中，如果B 的堆叠顺序高于 A，即使元素 'a' 的 z-index 为一百万。

更新：创建堆叠上下文的新 css 角色：transform、filter、css-region 和 pages_media.

堆叠上下文中的顺序：
1.根元素
2. 带负 z-index 的定位元素。
3. none 按照 html 标记
的顺序定位元素 4.定位元素
5.根据z-index定位带z-index的元素。

现在回到问题，在本例中，红色和绿色 div 创建堆叠上下文，因为它们已定位（固定）并具有 z-index。
它们都有相同的 z-index（值为 2），因此堆叠顺序是绿色下方的红色，因为这是 html 标记的顺序。
现在让我们看看粉色和浅绿色元素，粉色嵌套在红色元素中，浅绿色嵌套在绿色元素中，由于红色元素的放样顺序低于绿色，因此红色元素内的所有嵌套元素都出现在绿色元素内的所有元素下方。

要解决此问题，我们需要创建一个新元素，该元素将创建一个新的堆叠上下文，其堆叠顺序高于红色和绿色 div，并将我们的弹出窗口放置在该元素内。

参考：关于 Z-Index 的Philip Walton： https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

z-index 不适用于 parents 处于固定位置的元素

z-index not working with elements whose parents are in fixed position

html

css

z-index

css-position