保持导航栏不重叠CSS中的其他元素

Question

我可以使用绝对定位让我的下拉导航保持在顶部，但它会在左侧移动，顶部的所有内容都会在导航后面。

如何让我的导航停止与position:absolute属性重叠其他所有内容？我的导航元素在我的CSS中，因此不可见<div>将不起作用。

以下是我的header.php文档中的HTML：

<center><nav>
<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/arcade">Arcade</a>
        <ul>
            <li><a href="/arcade/action">Action</a></li>
            <li><a href="/arcade/arcade">Arcade</a></li>
            <li><a href="/arcade/puzzle">Puzzle</a></li>
            <li><a href="/arcade/vehicle">Vehicle</a></li>
            <li><a href="/arcade/violence">Violence</a></li>
            <li><a href="/arcade/defense">Defense</a></li>
            <li><a href="/arcade/rpg">RPG</a></li>
        </ul>
    </li>
    <li><a href="">Watch</a>
        <ul>
            <li><a href="/watch/tv">TV Shows</a></li>
            <li><a href="/watch/movies">Movies</a></li>
        </ul>
    </li>
    <li><a href="">Extras</a>
        <ul>
            <li><a href="/reviews">Reviews</a></li>
            <li><a href="/news">Updates</a></li>
        </ul>
    </li>
    <li><a href="/support">Support</a></li>
</ul>
</nav></center>

以下是我在添加位置之前用于背景颜色和定位的CSS：

nav{
    background-color:#989898;
    margin: 0px -12.5%;
}

现在添加定位后的CSS：

nav{
    background-color:#989898;
    margin: 0px -12.5%;
            position:absolute;
            z-index:1000;
}

我的网站是www.gameshank.com/！

有什么想法吗？谢谢！

Answer 1

使用position:absolute时，它会从文档流中删除元素。防止position:absolute元素与其他元素重叠的最佳方法是使用边距属性。

尝试将此添加到您的CSS（用星号标注的差异，所以不要将其添加到代码中）：

nav {
    background-color: #989898;
    margin-left: -10%; /****  Remove other margin: 0 -12.5%; */
    margin-top: -100px; /*****/
    width: 100%; /****/
    position: absolute;
    z-index: 100;
}

#logo {  /**** This is all new. You can change to a different name if you need to.*/
    margin-top:100px;
}

将此添加到您的HTML <center>标记，该标记紧跟着<center>的{​​{1}}标记。

<nav>

---

另一方面，您应该考虑对所有代码进行重大改写。该网站正在使用<center id="logo"> ... </center> 和<center>之类的折旧标记，以便CSS可以在{* 1}}等HTML5元素中更好地处理这些样式。