保持导航栏不重叠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>标签拿着<nav>。

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

---

在不同的音符，你应该考虑这样做的所有代码显著重写。该网站使用折旧标签，例如<center>和<font>，CSS可以更好地处理HTML5元素，例如<nav>。