橫幅被忽略

Question

我想在我的橫幅下放置一個導航，但是當我嘗試這樣做時，它只是在我的橫幅後面（它假裝它不在那裏，這是通過移除position：absolute來解決的;但是當我做我的旗幟不會是在離開了頂部

<img class="banner" src="images/banner.png"> 
<nav class="navigation"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Prijzen</a></li> 
     <li><a href="#">Examen</a></li> 
     <li><a href="#">Leerlingen</a></li> 
    </ul> 
</nav> 

CSS：

.banner 
{ 
    width: 100%; 
    top: 0; 
    left: 0; 
    position: absolute; 
} 


.navigation 
{ 

} 

Answer 1

我建議使用一個容器，你的旗幟，併爲你的菜單如下：

HTML

<div class="navCont"> 
    <div class="banner">BANNER</div> 
    <nav class="navigation"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Prijzen</a></li> 
      <li><a href="#">Examen</a></li> 
      <li><a href="#">Leerlingen</a></li> 
     </ul> 
    </nav> 
</div> 

CSS

.banner 
{ 
    width: 100%; 
    height: 50px; 
    position: relative; 
    background: yellow; 
    float: left; 
} 

.navigation{ 
    float:left; 
} 

另外我建議使用position:relative和float而不是position:absolute。

看看這個例子：

fiddle

Answer 2

您需要添加position: relative到.navigation

Demo

.navigation { 
    position: relative; 
}