html - 在绝对定位的 div 之后放置粘性导航栏

Question

我有一个要占据初始屏幕 100% 的 div，需要左右浮动。因此，我必须将 div = 设置为，以便 float 元素可以占据 100% 的屏幕。我现在正在尝试在其他 div 之后添加，但是这不起作用，因为导航栏没有定位在绝对定位的元素下。

<div id = "top-news">
         <div id = "top-logo">
            <img src = "assets/logo.png" />
          </div>
          <div id = "focused-story">
            <img src = "assets/clinton.jpg" />
          </div>
          <div id = "story-carousel">
            <ul>
              <a href = "#"><li>First story</li></a>
              <a href = "#"><li>Second story</li></a>
              <a href = "#"><li>Third story</li></a>
              <a href = "#"><li>Fourth Story</li></a>
              <a href = "#"><li>Fifth Story</li></a>
            </ul>
          </div>
        </div>

上面是绝对定位的代码段，下面是导航栏

      <nav id = "navbar">
        <img src = "assets/logo.png" />
      </nav>

这是定位一切的相关CSS

#top-news
{
  width: 100%;
  height: 100%;
  overflow: auto;
  position: absolute;
}

#top-logo
{
  width: 100px;
  background-color: #d3d3d3;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  position: absolute;
  left: calc(50% - 50px);
}

#top-logo img
{
  width: 65px;
  margin: 0 auto;
  margin-left: 14.5px;
  padding: 5px;
}

#focused-story
{
  width: 50%;
  height: 100%;
  float: left;
  background-color: blue;
}

#story-carousel
{
  width: 50%;
  height: 100%;
  float: right;
  background-color: #f6f3ed;
  display: flex;
  align-items: center;
}

#navbar
{
  position: sticky;
  top: 100%;
  width: 100%;
  background-color: #d3d3d3;
  height: 50px;
}

我认为这会导致导航栏位于下一页，但它只是与绝对 div 重叠，因为它已脱离流程。有什么办法可以解决这个问题吗？

Answer 1

我的建议是将 margin-top 添加到 100vh 的 #navbar(vh = 视口(viewport)高度)。这将允许您考虑文档流之外的绝对定位元素。

还要确保 #top-news 有一个 top: 0 以确保它位于文档的顶部。

希望对您有所帮助。