使用职位

Question

我目前正在玩HTML并使用职位来调整我的div内容。

目前，我有3个div。 2个div使用position：fixed，另一个使用position：relative。

我的两个固定div跨越页面宽度100％并在网页顶部对齐。像顶吧。

我的第三个div位于顶部栏的下方，位置为：relative。我遇到的问题是第三个div没有位于两个固定div之下（见图）

这是我的代码：

.topbar-container { 
position:fixed; 
width:100%; 
height:72px; 
background-color:#ffffff; 
border-bottom:1px solid #e0e0e0;
z-index:2; 
top:0; 
}

.topbar { 
position:fixed;
width:1200px; 
height:72px; 
left:50%; 
margin-left:-600px; 
top:0;
}

.body-container { 
position:relative; 
width:80%; 
height:200px;
margin:0 auto;
left:50%; 
margin-left:-600px;  
max-width:1200px; 
border:1px solid red;
}

我的HTML：

<div class="topbar-container"> 
        <div class="topbar"> 

        </div>
    </div>

    <div class="body-container"> 
    </div>

正如你可以从图片中看到的那样，带有红色边框的div正被推到页面的顶部，我想通过使用position：relative来解决这个问题。

有人可以来找我吗？

提前致谢

  

http://www.dumpt.com/img/viewer.php?file=d96p2ywgzqs5bmnkac7q.png

Answer 1

设置position: fixed或position: absolute将从页面流中删除元素。您现在需要明确设置top的{​​{1}}属性，使其显示在.body-container下：

.topbar-container