Html 我的下拉菜单隐藏在我的分区标签后面

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

以下是JSFIDLE：

这是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>

---

把这个从Main部分拿下来

position: relative;

---

可以使用

z-index

指定元素的垂直堆栈顺序。（请注意，为了使

z-index

起作用，元素必须具有绝对或相对位置。）

有不同的方法可以做到这一点。您只需确保要放在顶部的元素具有更高的

z-index

。这里有一个解决方案：

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

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

---

.mainsection

在HTML中的定义比菜单中的定义晚，并且由于两者都从常规流程中删除，

.mainsection

将覆盖菜单。我推荐一个更自然的布局，但如果没有，你可以试试这个：

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

---

这将保证菜单和其中的所有内容都高于其他内容，只要元素将

位置设置为除
静态
之外的任何内容，谢谢！什么是更自然的流动？我是css和html的新手。@user1186050:只需使用块级元素的属性，而不是神奇的数字、奇怪的浮点数和
position
s。（顺便说一句，你可以用
边距：0 auto
）水平居中一个块级元素。你能给我举一些例子吗？我不太清楚你所说的神奇数字和奇怪的浮点数是什么意思。@user1186050:不要用
margin
和
75px
来居中某个东西，而是说你希望它以
margin:0 auto
居中。我所说的奇怪浮点是指不必要地使用
float
属性。这条线索偏离了主题；如果你想了解更多信息，请问另一个问题。
//inset this code
 .right-nav-after-login li ul{z-index:100;}

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