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

Question

我有一个水平列表框，上面有一个弹出式覆盖层。水平框使用 ui li

构建

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

.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

Answer 1

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

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

WORKING DEMO