gpt4 book ai didi

HTML
排序

转载 作者:太空宇宙 更新时间:2023-11-04 07:40:21 25 4
gpt4 key购买 nike

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

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

第一个 div 是一个导航栏,所以我将它的位置设置为固定。我希望第二个 div 出现在导航栏下方,但当页面加载时它出现在导航栏上方。 afterNav div 从 body/html 的左上角开始。我尝试使用 position 属性,但不是很成功。如何让第二个 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;
}

最佳答案

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

如果你的导航高度是70px那么你需要设置外层div padding-top 70px。

#navigationBar{
display:block;
position:fixed;
background-color: black;
width:100%;
height:70px;
z-index:0;
}
#after-nav{
position:relative;
z-index:-1;
padding-top: 70px;
}

你也可以使用 margin-top。

关于HTML <div> 排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48577483/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com