内容位于导航下拉列表上方的 Z-Index 分层问题答案

【问题标题】：Z-Index Layering issues where content is above the navigational dropdown内容位于导航下拉列表上方的 Z-Index 分层问题
【发布时间】：2014-06-13 01:52:10
【问题描述】：

我正在开发一些 HTML/CSS/JQuery 以创建一个不错的设计，我一直在研究一些 CSS 下拉导航项，但正文内容似乎正在我的下拉菜单顶部播放。我一直在尝试使用 z-index 以使分层正确。但我似乎无法做到这一点！

HTML 侧边栏（下拉导航）

<div class="ap-sidebar ap-sidebar-light ap-sidebar-fixed" id="ap-sidebar" role="sidebar">
      <div class="ap-sidebar-profile" role="profile">
        <div class="ap-sub-menu">
          <a href="#"><img src="images/profile.jpg" alt="Profile Avatar" /> <span class="user">mdixon18</span></a>
          <ul class="dropdown">
            <li><a href="#"><img src="images/profile.jpg" alt="Profile Avatar" /></a></li>
            <li><a href="#">Name</a></li>
            <li class="seperator"></li>
            <li><a href="#"><span class="ap-bade">2</span> Un-Read E-Mails</a></li>
            <li><a href="#"><span class="ap-bade">8</span> Assigned Tickets</a></li>
            <li><a href="#"><span class="ap-bade">23</span> New Post Comments</a></li>
            <li class="seperator"></li>
            <li><a href="#">View Profile</a></li>
            <li class="seperator"></li>
            <li>Not mdixon18? <a href="#">Log Out</a></li>
          </ul>
        </div>
      </div>
   </div>

HTML Main（覆盖下拉菜单的内容）

<div class="ap-content" role="Main">
 <div class="ap-header">
   <h1>Overlaying text!</h1>
  </div>
</div>

CSS（用 sass 完成）

body .ap-sidebar {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
  background-color: $c2;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  height: 100%;
  width: 160px !important;
  z-index: 1;
}
body .ap-sidebar-dark {
  background-color: $c5;
}
body .ap-sidebar-light {
  background-color: $c6;
}

body .ap-sidebar-fixed {
  position: fixed;
}

body .ap-sidebar .ap-sidebar-profile .ap-sub-menu {
  position: relative;
  height: 88px;
  line-height: 88px;
  width: 100%;
  background-color: #8ed054;
}

body .ap-sidebar .ap-sidebar-profile .ap-sub-menu a {
  display: block;
  text-decoration: none;
}

body .ap-sidebar .ap-sidebar-profile .ap-sub-menu img {
  position: relative;
  height: 48px;
  width: 48px;
  @include border-radius(25px, 25px, 25px, 25px);
  top: 6px; /* (48/2) - 16 = 8 */
  border: 2px solid #65ad25;
  left: 50%;
  margin-left: -24px;
}

body .ap-sidebar .ap-sidebar-profile .ap-sub-menu span.user {
  position: relative;
  display: block;
  font-size: 1em;
  color: #fff;
  top: -62px;
  text-align: center;
}

body .ap-sidebar .ap-sidebar-profile .ap-sub-menu:hover > ul.dropdown {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

body .ap-sidebar .ap-sidebar-profile .ap-sub-menu ul.dropdown {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.5s, opacity 0.5s linear;
  background: #ffffff;
  border-radius: 0;
  padding: 0;
  position: absolute;
  left: 100%;
  top: 0;
  list-style: none;
  z-index: 500;
}

body .ap-sidebar .ap-sidebar-profile .ap-sub-menu ul.dropdown li {
  float: none;
  line-height: 40px;
  background-color: #ffffff;
  border-top: 1px solid rgba(0,0,0,0.05);
  height: 40px;
}

body .ap-sidebar .ap-sidebar-profile .ap-sub-menu ul.dropdown li:first-child {
  border-top: none;
}


body .ap-sidebar .ap-sidebar-profile .ap-sub-menu ul.dropdown li a {
  position: relative;
  display: block;
  white-space: nowrap;
  color: $c5;
  text-decoration: none;
}

body .ap-content {
  position: relative;
  padding-left: 160px;
  z-index: 1;
}

我在我认为有必要的地方包含了 z-index，并在我不确定是否只是为了测试的地方尝试了其他的，但 HTML 覆盖标题文本似乎将自己放在下拉菜单的顶部，即使我使用了一些东西喜欢z-index: 9999;。谁能注意到我的错误？

http://jsfiddle.net/ggVas/你可以看到覆盖菜单的标题文本。

谢谢。

【问题讨论】：

您为.ap-content 和.ap-sidebar 设置了z-index: 1，所以由于.ap-content 的样式是在.ap-sidebar 之后，它可能会被掩盖。
哇，原来这么简单！谢谢你发现！！！真的谢谢你！

标签： javascript jquery html css drop-down-menu

【解决方案1】：

正如@TylerH 所发现的，当你有两个主容器时，如果你为它们分配相同的 z-index，那么 DOM 中最后一个声明的容器将优先于前一个容器。感谢@TylerH 的帮助。

只需将z-index: 1; 更改为z-index: 2; 在.ap-sidebar 课程上，我希望这对遇到类似问题的其他人有用。

【讨论】：