導航菜單中的內容重疊？

我在頂部有一個導航菜單，內容與導航菜單重疊。我想要的是內容必須在導航欄下方。如何解決這個問題？請幫幫我？導航菜單中的內容重疊？

下面是截圖： http://s1277.photobucket.com/user/fuscia_pink19/media/ss_zps888fc3e9.png.html

正如你所看到的AAAA字母導航欄上也。

這裏是我的代碼：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
body { 
margin: 0; 
padding: 0; 
} 

nav { 
float: right; 
position: absolute; 
top: 28%; 
right: 16%; 
font-size: 20px; 
} 

nav li { 
list-style: none; 
display: inline; 
} 

nav li a { 
text-decoration: none; 
color: #a4d0dd; 
padding: 11px 25px; 
} 

#wrap { 
position: fixed; 
left: 0; 
top: 0; 
background-color: black; 
width: 100%; 
height: 80px; 
border-bottom: 1px solid #444444; 
} 
</style> 
</head> 
<body> 
<div id="wrap"> 

<nav> 
<ul> 
<li> 
<a href="#">Home</a> 
</li> 

<li> 
<a href="#">My Profile</a> 
</li> 

<li> 
<a href="#">Account</a> 
</li> 

<li> 
<a href="#">Logout</a> 
</li> 
</ul> 
</nav> 
</div><!-- ENDING TOP_MENU DIV --> 
<div class="content"> 
a<br /> 

a<br /> 

a<br /> 

a<br /> 

a<br /> 

a<br /> 

</div> 
</body> 
</html>

來源

2013-08-21 Crystal Mae Perez

擺脫'位置：fixed'在'＃wrap'中。 – putvande

你好putvande感謝回答，但我也想導航保持在上面。因爲我想要一個可滾動的導航？就像在Facebook一樣。 –

截圖與您的代碼不同。通過此代碼，內容位於導航之後。 – putvande

得到「下面」你需要添加一個margin-top具有相同的高度，你的導航欄導航的內容，在這種情況下，「80px」

所以你添加這行到你的CSS：

.content { margin-top: 80px; }

來源

2013-08-21 10:11:47 putvande

導航菜單中的內容重疊？

回答

相關問題