BCD*_*BCD 6 html css css-position overlapping
我有一个粘性顶部导航栏，我希望在滚动时保持可见并高于所有其他内容。我在页面上设置了内容，position: relative以便我可以在它周围放置其他元素。当我这样做时，相对内容在滚动时会忽略导航栏并重叠它。有什么办法可以让我的页面内容相对定位并仍然观察粘性导航栏？
我试过给相对内容一个等于导航栏高度的上边距。
.nav-bar {
position: sticky;
top: 0px;
font-family: Arial, Helvetica, sans-serif;
border-bottom: solid rgb(179, 173, 173) 1px;
background-color: rgb(255, 255, 255);
}
.nav-bar #title {
margin: 0;
font-size: 2em;
padding-left: 2%;
}
.test-class #test-content {
width: 500px;
height: 500px;
background-color: rgb(70, 67, 67);
position: absolute;
}<div class="nav-bar">
<p id="title">Title</p>
</div>
<div class="test-class">
<p id="test-content"></p>
</div>预期：粘性标题始终高于所有其他内容。
实际：当其位置设置为相对时，内容与标题重叠。
小智 8
如果您希望导航栏始终可见，只需给它一个比您的内容大的 z-index
.nav-bar{
position:sticky;
top:0px;
font-family: Arial, Helvetica, sans-serif;
border-bottom:solid rgb(179, 173, 173) 1px;
background-color: rgb(255, 255, 255);
z-index: 1
}
尝试这个。position:absolute从班级中删除.test-class #test-content。它工作得很好，如你所愿。
.nav-bar{
position:sticky;
top:0px;
font-family: Arial, Helvetica, sans-serif;
border-bottom:solid rgb(179, 173, 173) 1px;
background-color: rgb(255, 255, 255);
}
.nav-bar #title{
margin:0;
font-size: 2em;
padding-left: 2%;
}
.test-class #test-content {
width:500px;
height:500px;
background-color:rgb(70, 67, 67);
}<body>
<div class="nav-bar">
<p id="title">Title</p>
</div>
<div class="test-class">
<p id="test-content"></p>
</div>
</body>