处理职位

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会将元素从页面流中删除。 现在，您需要显式设置.body-container的top属性，以使其显示在.topbar-container ：

.body-container { 
position:relative; 
width:80%; 
height:200px;
margin:0 auto;
left:50%; 
margin-left:-600px;  
max-width:1200px; 
border:1px solid red;
top: 72px; /* must be >= the height of .topbar-container */
}