html - 横幅被忽略

Question

我想在我的旗帜下放置一个导航，但当我尝试这样做时，它只是在我的旗帜后面(它假装它不存在。这通过删除位置解决:绝对;但是当我这样做时我的横幅将不再位于左上角。

<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