保持導航欄不重疊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>。