Question

元素具有以下CSS属性：

#mask {
  display: none;
  background: transparent; 
  position: fixed; left: 0; top: 0; 
  z-index: 10;
  width: 100%; height: 100%;
  opacity: 0.8;
  z-index: 999;
}

和另一个应该出现在顶部的元素：

.login-popup {
  display:none;
  position: fixed;
  z-index: 99999;
}

事实证明，FireFox很好。在Chrome上，这个#mask被投射到其他所有内容之上。 Chrome版本为24.0.1312.70。可能有什么不对？

注意：这两个元素都是使用JavaScript操作的。 JavaScript不会以任何方式干扰Z-index属性。

jsfiddle：http://jsfiddle.net/zbesr/8/

Answer 1

这是因为#mask的不透明度小于1.新的堆叠顺序适用于不透明度。有趣的文章描述了为什么会发生这种情况： http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

为什么Z-index总是在Google Chrome中解释为其他所有内容？

1 个答案: