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

Answer 2

您需要将position: relative添加到.navigation

<强> Demo

.navigation {
    position: relative;
}

横幅被忽略了

2 个答案: