Div，z-index，不透明度。错误，功能或用户相关问题？

Question

嗨我有一个CSS不透明度线破坏预期输出的问题。

Fiddle

红色div上的Z-index为1，蓝色为206。 现在，从CSS中删除（或更改为1.0）。#menu {opacity: 0.8;}

按预期工作。

有人可以解释一下吗？

或者更重要的是，如果我有一个半透明的div，我如何让我的黑色div在顶部？ 我不是CSS专家，所以很可能是用户错误。

Answer 1

您的问题是由#menu建立的意外 stacking context 。

引用MDN：

  

通过任何元素在文档中的任何位置形成堆叠上下文   这是

     

  
• 根元素（HTML），
  
• 定位（绝对或相对）z-index值不是“auto”，
  
• 不透明度值小于1的元素。
  

当你应用不透明度时，这就是你的div表现出意外的原因＆lt; 1到它。 #menu现在建立了一个单独的堆栈上下文，其后代#status的z-index在此上下文之外没有任何意义。要解决此问题，请将z-index应用于#menu本身。