Question

我有一个固定且10％透明的导航div - 这个div位于我的网页顶部。我创建另一个div，我希望它在第一个div的底部。当我运行代码时，第二个div从我的网页顶部开始，由于我的透明div，我可以看到第二个。

我知道有一个选项可以将第二个div顶部位置设置为px，但我希望有另一个更简单的方法（特别是因为我计划在第二个之后添加另一个div）。

这是我的HTML代码：

<body>
<div id="header">
    <div id="nav_bar">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </div>
</div>

<div id="main_pics">
<!-- photos here -->

</div>

这是我的css代码：

#nav_bar{
border: 2px solid black;
background: rgba(255,255,255,0.98);
height: 55px;
position: fixed;
width: 100%;
top: 0;
left: -2px;
}
#main_pics{
width: 80%;
background-color: gray;
height: 500px;
margin: auto;
}

Answer 1

看看你和maioman之间的讨论，真的不明白你用简单的方法是什么意思。

第一种方法（与maioman建议的相同）：http://jsfiddle.net/u6eydqw8/ 在main_pics不再需要*-top之后添加了后续div ..

第二种方法是，向DOM添加一个具有相同高度（包括边框宽度）的不可见容器，然后您不需要调整*-top。可以在这里看到http://jsfiddle.net/u6eydqw8/1/

请评论这是否是您要找的？

Answer 2

将position:fixed ; top:0;添加到#nav-bar css属性

和display:block ; margin-top:60px // (or the size you need ...)到#main-pics

改变div位置 - div在另一个div后面

2 个答案: