【发布时间】：2012-12-13 20:06:42
【问题描述】：
您好，我遇到了 CSS 不透明度换行预期输出的问题。
红色 div 上的 Z-index 为 1，蓝色为 206。
现在，从 CSS 中删除（或更改为 1.0）。#menu {opacity: 0.8;}
按预期工作。
有人能解释一下吗？
或者更重要的是，我如何在顶部制作较暗的 div，同时拥有一个半透明的 div？ 我不是 CSS 专家，所以很可能是用户错误。
【问题讨论】：
【发布时间】：2012-12-13 20:06:42
【问题描述】：
您的问题是由#menu 建立的意外stacking context。
引用MDN：
在文档中的任何位置，任何元素都可以形成堆叠上下文 要么是
- 根元素 (HTML)，
- 使用除“auto”以外的 z-index 值（绝对或相对）定位，
- 不透明度值小于 1 的元素。
这就是当您应用不透明度 #menu 现在建立了一个单独的堆叠上下文，其后代 #status 的 z-index 在此上下文之外没有任何意义。要更正此问题，请将 z-index 应用于 #menu 本身。
【讨论】：
-
我……呃……你引用什么？是啊是啊生病谷歌它。我理解了你的最后一句话，这就是诀窍。我……呃……哇！谢谢！！
-
@Tobis tl;dr z-index 仅对兄弟姐妹有效。
#menu和#input是兄弟姐妹，#status和#input不是。 -
绝对不是 tl;博士，我正在阅读。只是以前从未找到该资源。虽然这有点过头了，但我会为它添加书签以备将来使用。你在这里的时候还有什么好东西吗？ :) 再次感谢您的宝贵时间！
-
@Tobis 这就是我现在能想到的。如果您刚开始使用 CSS，SitePoint 是一个很好的资源。