z-index 无法获取覆盖上方的元素答案

【问题标题】：z-index not working to get an element above the overlayz-index 无法获取覆盖上方的元素
【发布时间】：2020-09-24 17:57:01
【问题描述】：

我有一个水平列表框，它被弹出叠加层重叠。并且水平框是使用ui li构造的

现在的问题是，如何使用z-index 获得叠加层上方的单个框。在我的示例中，我需要在覆盖 div 上方获取类名 .test 的 li。

.wrapper { position: relative }

ul li {
  margin:0;
  padding:0
}

li {
  background:yellow;
  display:inline-block;
  width:60px;
  height: 60px;

}

.overlay {
  background: rgba(0,0,0,0.5);
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:10
}

.test {
  z-index:100 /*not working */
}

DEMO

【问题讨论】：

标签： html css css-position z-index

【解决方案1】：

z-index 属性适用于定位元素。您可以将position: relative; 添加到元素中以使z-index 属性起作用：

.test {
  z-index:100;
  position: relative;
}

WORKING DEMO

【讨论】：

哎呀我试过了，但没用。让我检查一下我的代码中是否使用了其他 z-index 值
这个解决方案对我不起作用，即使我已将相对位置和更高的 z-index 应用于需要突出的元素。
@darKnight 可能还有另一个stacking context 导致了问题。堆叠上下文的顺序很重要。较高堆叠上下文中的元素会覆盖其他元素。

【解决方案2】：

将position: relative; 添加到您的测试类

【讨论】：