Question

我正在尝试使用z-index在html中实现一个弹出菜单。该页面由顶部栏和下方的标签栏组成。我想对它们都应用box-shadow，所以我不能使用position：static。标签栏的z-index应大于导航栏，因此它隐藏了导航栏的盒子阴影（因此，当我隐藏标签栏时，我希望看到盒子阴影导航栏）

下拉菜单应放在两者之上，但由于某些奇怪的原因，它被放置在导航栏的顶部，但在标签栏后面，尽管它的z-index设置为更高的值比两者都好。

我读到了z-index上下文，但我似乎无法理解这里发生了什么。这是一个指向codepen的链接： http://codepen.io/anon/pen/WvgMXX

HTML：

<div class="body">
  <div class="container">
    <div class="navbar">
      Nav bar
      <div class="menu"> drop down menu</div>
    </div>
    <div class="tabs"> tabs bar </div>
  </div>
</div>

的CSS：

.body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: gold;
  position: static;
}

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  margin: 0;
  background-color: green;
}

.navbar {
  width: 100%;
  margin-bottom: 0;
  z-index: 100;
  box-shadow: 0px 3px 11px -5px #000;
  height: 30px;
  background-color: red;
  position: relative;
}

.tabs {
  width: 100%;
  font-size: 1.1em;
  box-shadow: 0px 3px 11px -5px #000;
  z-index: 101;
  position: absolute;
  height: 30px;
  background-color: gold;
  top: 30px;
}

.menu {
  width: 6em;
  height: 6em;
  position: absolute;
  left: 200px;
  background-color: white;
  z-index: 2000;
}

有什么想法吗？

Answer 1

您的下拉菜单包含在.navbar中。如果父级z-index小于项目，则z-index子级值不会影响。您需要增加.navbar z-index。

请在此处查看更新过的笔http://codepen.io/anon/pen/VLGXvP

在旁注中，有很大的z-index滥用，你可以使用3或9的倍数。使用100和2000是令人难以置信的浪费。同样需要不必要的定位。

Answer 2

由于您的下拉菜单位于导航栏内，因此您可以根据需要将其设置为z-index，但它永远不会高于其父级。您可以将它放在导航栏之外：http://codepen.io/anon/pen/Wvgzrg

Answer 3

我不是100％确定你想要实现的目标，但是如果你从导航栏中删除“position：relative”属性，它就可以正常工作。我在Chrome中试过了。

.navbar {
  width: 100%;
  margin-bottom: 0;
  z-index: 100;
  box-shadow: 0px 3px 11px -5px #000;
  height: 30px;
  background-color: red;
}

http://jsfiddle.net/11wkyvat/

使用z-index定位元素会导致意外结果

3 个答案: