时间戳

首页 > 解决方案 > 如何保持位置：相对内容与我的位置重叠：粘性标题？

html - 如何保持位置：相对内容与我的位置重叠：粘性标题？

问题描述

我有一个粘性顶部导航栏，我希望在滚动时保持可见并且高于所有其他内容。我在页面上有我设置的内容，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>

预期：粘性标题始终高于所有其他内容。

实际：当其位置设置为相对时，内容与标题重叠。

标签： htmlcsscss-positionoverlapping

解决方案

如果您希望您的导航栏始终可见，只需给它一个比您的内容更大的 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
}

推荐阅读