Question

我有一个div，它要占据初始屏幕的100％，并且需要左右浮动。因此，我必须将div =设置为，以便浮动元素可以占据屏幕的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的{{1}}中添加#navbar（vh =视口高度）。这样一来，您就可以将超出文档流程范围的绝对定位元素考虑在内。

还要确保100vh有一个#top-news，以确保它位于文档顶部。

希望有帮助。

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

1 个答案: