非常奇怪的html/css

Jfiddle

如果你看这个，我的白条在顶部，我已经不知道他为什么在那里，就像他不认识我的旗帜一样。无论如何，我希望我的白条位于横幅下方的中间位置（图片中的红条）。我真的不知道该怎么办了，把这当作我的最后手段

html:

---

似乎是关于你是浮动元素的方式

试一试

---

告诉中间div显示在任何浮动元素的下方。

如果去掉浮动：菜单左侧，白色框将位于菜单下方和中间。菜单默认为left，因此去掉float:left不会改变任何其他内容。

---

一般来说，为元素设置float属性不会像通常那样影响元素周围元素的位置。

Ok上传了jfiddleAh谢谢！但是白条不会出现在徽标图像的前面，你知道怎么做吗？（标志前的middendiv）谢谢，我没注意到！

<div class="navCont">
    <div class="bancont"><img class="banner" src="images/banner.png"></div>
    <nav class="cssmenu">
        <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>
<div class="midden">

    <div class="middentextvak">
    </div>
    <img class="logo" src="images/logo.png">
</div>

body
{
    background-image:url('images/background.jpg');
    background-repeat: no-repeat;
    height: 100%;
    margin: 0 0 0 0;
}


.banner
{
    width: 100%;
    top: 0;
    left: 0;
    position: relative; 
    float: left;

}


.cssmenu
{
    float:left;
    margin-top: 0px;
    left: 0;
    background-color:black;
    width: 100%;
    height: 6%;

}

.cssmenu ul
{
    list-style-type:none;
    text-align: center;
    margin-right: 6%;
}

.cssmenu li
{
    display:inline; 
    padding-left: 5%;

}

.cssmenu li a
{
    color: white;
    text-decoration: none;
    font-family:Eras Bold ITC;
    font-size: 20px;

}

.cssmenu li a:hover
{
    color: #0671ca;
    text-decoration: none;
    font-family:Eras Bold ITC;
    font-size: 20px;
}

.middentextvak
{
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    background: white;

}

.logo
{
    position: absolute;
    display: block;
    margin-left: 25%;
    margin-right: auto;
    margin-top: 3%;
    width:50%;
    opacity: 0.5;
    z-index: -1;
}

.midden {
 clear:both;
}