我的下拉菜单隐藏在我的部分标签后面答案

【问题标题】：My drop down menu is hidden behind my section tag我的下拉菜单隐藏在我的部分标签后面
【发布时间】：2014-06-14 05:56:54
【问题描述】：

我的下拉菜单隐藏在我的“mainsection”标签后面，我不确定我能做些什么来公开它。它需要位于“mainsection”标签区域的顶部，而不是其后面。

这里是 jsfiddle：http://jsfiddle.net/nSmZ9/

这里是html代码

<header>
<ul class="right-nav-after-login">
    <li>Home</li>
    <li>About</li>
    <li>
        Menu
        <ul>
            <li>Account</li>
            <li>My Gifts</li>
            <li>Log off</li>
        </ul>
    </li>
    <li>Contact</li>
</ul>
</header>
<article>
    <section class="mainsection"></section>
</article>

这是我的css

header {
    height: 66px;
    margin-left: 75px;
    margin-right: 75px;
    border: 2px solid black;

}

.mainsection {
    background-color: #a6dbed;
    height: 500px;
    position: relative;
}

.right-nav-after-login {
    float: right;
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.right-nav-after-login li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.right-nav-after-login li:hover {
  background: #555;
  color: #fff;
}
.right-nav-after-login li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.right-nav-after-login li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
.right-nav-after-login li ul li:hover { background: #666; }
.right-nav-after-login li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

【问题讨论】：

标签： html css drop-down-menu

【解决方案1】：

.mainsection 在 HTML 中的定义比菜单晚，并且由于两者都被排除在常规流程之外，.mainsection 将覆盖菜单。我会推荐一个更自然的布局，但缺乏，你可以试试这个：

.right-nav-after-login, .right-nav-after-login * {
    z-index: 1;
}

这将保证菜单和其中的所有内容都高于其他所有内容，只要元素将position 设置为除static 之外的任何内容。

【讨论】：

您好，谢谢！什么是更自然的流动？我是 css 和 html 的新手。
@user1186050：只需使用块级元素的属性，而不是幻数和奇怪的浮点数和positions。（顺便说一句，您可以使用margin: 0 auto 将块级元素水平居中）。
你能给我一些例子吗？我不太清楚你所说的幻数和奇怪的浮点数是什么意思。
@user1186050：不要使用margin 和75px 来居中，而是说你希望它以margin: 0 auto 居中。奇怪的浮动是指不必要地使用 float 属性。而且这个话题越来越离题了；如果您想了解更多信息，请提出另一个问题。

【解决方案2】：

您可以使用z-index 指定元素的垂直堆叠顺序。（请注意，为了使z-index 起作用，元素必须具有绝对或相对定位。）

有不同的方法可以做到这一点。您只需要确保您想要在顶部的元素具有更高的z-index。这是一种解决方案：

.mainsection {
    ....
    z-index:1;
}

.right-nav-after-login li ul li {
    ....
    position:relative;
    z-index:2;
}

See demo

【讨论】：

【解决方案3】：

从 .mainsection 中删除它。

position: relative;

【讨论】：

【解决方案4】：

//inset this code
 .right-nav-after-login li ul{z-index:100;}

【讨论】：