z-index 无法在叠加层上方获取元素

Question

我有一个水平列表框，它被一个弹出式覆盖重叠。水平框的结构使用ui li

现在的问题是，如何使用z-index. 在我的示例中，我需要获取在覆盖 div 上方li具有类名.test的 。

.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 */
}

演示

Answer 1

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

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

工作演示