1

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

我的问题截图

如何让我的导航停止与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/！

有任何想法吗？谢谢！

4

1 回答 1

2

使用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><nav>

<center id="logo"> ... </center>

另一方面，您应该考虑对所有代码进行重大重写。该站点正在使用已弃用的标签，例如<center>和<font>用于 CSS 可以更好地处理 HTML5 元素（例如<nav>.

于 2013-10-02T00:55:50.710 回答