html - 使用 CSS 在 HTML 中设置 的显示顺序

Question

我有两个 <div>我很难订购它们。请教我并帮助我。

<div class="menubar">
    <ul class="menu">
        <li class="itmes"></li>
        <li class="itmes"></li>
        <li class="itmes"></li>
    </ul>
</div>
<div class="b_header">

</div>

这是相关的 CSS。

.menubar{
width: 110%;
background-color: #000000;
margin-top: 32px;
height: 35px;
display: block;
position: absolute;
margin-left: -20px;
vertical-align: middle;
text-align: center;}

.b_header{
width: 110%;
background: url('./img/b_header.gif');
margin-left: -20px;
height: 15px;
position: inherit;
margin-top: 0px;}

我希望并期待看到 <div class="b_header">在 <div class="b_header"> 下面但事实并非如此。

解决方案是什么？

Answer 1

移除

position:absolute;

它会起作用的。绝对定位将从页面流中移除菜单，因此其下方的标题 div 将有效地假装菜单不存在。

或者(如果您需要 position:absolute)，您可以通过给标题 margin-top:67px;

强制标题在菜单下方