不透明度属性和下拉菜单[重复]答案

【问题标题】：Opacity property and drop menu [duplicate]不透明度属性和下拉菜单[重复]
【发布时间】：2016-07-03 10:18:19
【问题描述】：

<body>
  <div id="header"></div>

  <div id="mainArea">
    <div class="container page">
      /* Paragraph here */
    </div>
  </div>
</body>

我打算在“标题”上有一个下拉菜单，并设计一个这样的页面 [.

但在那之后，当我将“mainArea”的不透明度更改为0.8时，竟然是这个[。

mainArea 现在位于header 导航栏的顶部。我试图改变它的 z-index 但没有任何改变。

更新：

我已经阅读了有关堆叠上下文的信息，您可以在 MDN The stacking context 阅读更多详细信息。

我当时唯一误会的是我认为 z-index 是继承的，但事实证明不是。然而，当我尝试将它应用于子定位元素时，它起作用了。

希望这能帮助遇到同样问题的人。别人的推荐链接对我也很有用。

【问题讨论】：

标签： html css

【解决方案1】：

我之前也遇到过同样的问题。我不知道实际原因，但是当您在包含菜单的 div 上定义 opacity 属性时，z-index 不起作用。

移除不透明度并尝试 z-index，不确定

【讨论】：

【解决方案2】：

您需要将margin-top 添加到mainArea。

.mainArea{
    margin-top:10px; // choose whatever value suits you.
}

另外，删除 z-index 和 opacity，因为它们与问题无关。

【讨论】：