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

Question

嗨，我遇到了 CSS 不透明度换行预期输出的问题。

小提琴

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

按预期工作。

有人可以解释一下吗？

或者更重要的是，我如何在顶部制作较暗的 div，同时拥有一个半透明的 div？我不是 CSS 专家，所以很可能是用户错误。

Answer 1

您的问题是由#menu.

引用MDN：

在文档中的任何位置，任何元素都可以形成堆叠上下文

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

这就是当您应用 opacity < 1 时您的 div 行为异常的原因。#menu现在建立一个单独的堆叠上下文，它的后代的z-index#status在这个上下文之外没有任何意义。要更正此问题，请将 z-index 应用于#menu自身。