Question

<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是继承的，但事实证明并非如此。然而，当我试图将它应用于儿童定位元素并且它起作用。

希望这会帮助有人遇到同样的问题。其他人的推荐链接对我来说也很有用。

Answer 1

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

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

Answer 2

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

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

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

不透明度属性和下拉菜单

2 个答案: