Question

我的html页面中有两个div，我希望它们一个接一个地出现。这是我的html页面的结构：

<html>
<body>
<div id="navigationBar"></div>
<div id="afterNav"></div>
</body>
</html>

第一个div是导航栏，所以我将其位置设置为fixed。我希望第二个div显示在导航栏下方，但是在加载页面时它会出现在导航栏上方。 afterNav div从body / html的左上角开始。我试着玩位置属性，但不是很成功。如何让第二个div出现在第一个div之后？以下是我的css：

html, body{
    height:100%;
    width:100%;
    margin:0px;
    margin:0;
    font-family: "Helvetica" , "Arial", sans-serif;
    font-size: 1rem;
    color: #212529;
}

#navigationBar{
    display:block;
    position:fixed;
    background-color: black;
    width:100%; 
    height:70px;
    z-index:0;
}

#afterNav{
    position:relative;
    z-index:-1;
}

Answer 1

如果您将第一个div（navigationBar）设置为fixed，那么您需要在顶部填充以设置外部div位置。

如果导航高度为70px，则需要设置外部div填充顶部70px。

split()

你也可以使用margin-top。

Answer 2

您需要将其移至固定导航下方：

#navigationBar{
    z-index:1;
}
#after-nav{
    margin-top:70px
    z-index:0;
}

当你有一个position:fixed;元素时，该元素将位于其下方的任何元素之上，并具有较低的z-index。

我也会改变z索引，所以你不会有-1。

HTML <div>订购

2 个答案: