如何让 position:sticky 的右菜单块不覆盖在 header 上？

Question

当我滚动屏幕时，右侧菜单块覆盖在 header 上。只有当我的浏览器 window 很小时才会发生。

1.小型浏览器 window

2。大浏览器 window

<header> <ul> <li><a href="">text</a></li> <li><a href="">text</a></li> <li><a href="">text</a></li> <li><a href="">text</a></li> <li><a href="">text</a></li> </ul> </header> <div class="content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, illo accusamus corrupti facere exercitationem quis amet aperiam ipsam illum ex laudantium nesciunt dicta iure qui tempore id at, alias repellat! Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, illo accusamus corrupti facere exercitationem quis amet aperiam ipsam illum ex laudantium nesciunt dicta iure qui tempore id at, alias repellat! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam voluptatibus incidunt ipsa, tempore fuga veniam et consectetur alias nulla adipisci voluptas! Mollitia, excepturi voluptatibus animi aliquid numquam perferendis architecto accusantium. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque inventore, cumque architecto asperiores a soluta deserunt cupiditate quae quisquam necessitatibus commodi, aliquam reprehenderit adipisci sequi iste fugiat, recusandae voluptatem distinctio. </p> </div> <div class="wrapper"> <div class="left_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non placeat explicabo minus vero quae illum debitis facere sint consequatur, quia, perspiciatis reprehenderit quas eligendi, reiciendis repellendus sit officia provident. Porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem fugiat, vel totam ullam quaerat asperiores quidem blanditiis optio natus quos laborum deserunt repellendus quod dignissimos excepturi non iure ducimus ipsa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non placeat explicabo minus vero quae illum debitis facere sint consequatur, quia, perspiciatis reprehenderit quas eligendi, reiciendis repellendus sit officia provident. Porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem fugiat, vel totam ullam quaerat asperiores quidem blanditiis optio natus quos laborum deserunt repellendus quod dignissimos excepturi non iure ducimus ipsa.</div> <div class="ad_block"> <ul> <li><a href="">text</a></li> <li><a href="">text</a></li> <li><a href="">text</a></li> <li><a href="">text</a></li> <li><a href="">text</a></li> </ul> </div> </div>
header { width: 100%; height: 50px; background: yellow; display: flex; justify-content: center; position: fixed; } header ul li { display: inline-block; list-style: none; margin-right: 30px; } .content { padding-top: 50px; } .wrapper { display: flex; width: 700px; margin: 0 auto; height: 900px; } .left_content { width: 95%; height: 800px; background: #ffdede; padding: 10px; } .ad_block { display: inline-block; width: 40%; height: 400px; top: 58px; position: sticky; background: yellowgreen; }

我该如何解决这个问题？提前谢谢你:)

Answer 1

粘性元素仅粘在其父元素内，这就是为什么在某些时候（当一个元素滚动到足够多时，父元素的底部出现）该元素将开始与其父元素一起滚动并覆盖您的菜单。

可能还有其他解决方案，但我认为菜单是固定的这一事实无济于事。这是 grid

的解决方案

main {
  display: grid;
    grid-template-rows: auto 1fr;
    box-sizing: border-box;
    height: calc(100vh - 16px); /* -16px because the body has a 8px padding */
}

.container {
  overflow: auto;
  display: grid;
  grid-template-columns: 60% 40%;
}

.content {
  grid-column: 1 / -1;
}

header ul {
  margin: 0;
  padding: 0;
  height: 50px;
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px; /* gap with flex doesn't work with Safari */
}

header ul li {
  /* display: inline-block; */ /* no need because parent is flex */
  list-style: none;
  /* margin-right: 30px; */ /* no need because of gap */
}

.left_content {
  /* width: 95%; */ /* no need because parent is grid */
  height: 800px;
  background: #ffdede;
  padding: 10px;
}

.ad_block {
/* display: inline-block; */ /* no need because parent is grid */
/*  width: 40%; */ /* no need because parent is grid */
  height: 400px;
  background: yellowgreen;
}

.ad_block  > ul {
  top: 0;
  position: sticky;
}

<main>
  <header>
    <ul>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
    </ul>
  </header>
  <div class="container">
        <div class="content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, illo accusamus corrupti facere exercitationem quis amet aperiam ipsam illum ex laudantium nesciunt dicta iure qui tempore id at, alias repellat!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, illo accusamus corrupti facere exercitationem quis amet aperiam ipsam illum ex laudantium nesciunt dicta iure qui tempore id at, alias repellat! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam voluptatibus incidunt ipsa, tempore fuga veniam et consectetur alias nulla adipisci voluptas! Mollitia, excepturi voluptatibus animi aliquid numquam perferendis architecto accusantium. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque inventore, cumque architecto asperiores a soluta deserunt cupiditate quae quisquam necessitatibus commodi, aliquam reprehenderit adipisci sequi iste fugiat, recusandae voluptatem distinctio.
    </p>
  </div>
  
    <div class="left_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non placeat explicabo minus vero quae illum debitis facere sint consequatur, quia, perspiciatis reprehenderit quas eligendi, reiciendis repellendus sit officia provident. Porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem fugiat, vel totam ullam quaerat asperiores quidem blanditiis optio natus quos laborum deserunt repellendus quod dignissimos excepturi non iure ducimus ipsa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non placeat explicabo minus vero quae illum debitis facere sint consequatur, quia, perspiciatis reprehenderit quas eligendi, reiciendis repellendus sit officia provident. Porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem fugiat, vel totam ullam quaerat asperiores quidem blanditiis optio natus quos laborum deserunt repellendus quod dignissimos excepturi non iure ducimus ipsa.</div>
    <div class="ad_block">
      <ul>
        <li><a href="">text</a></li>
        <li><a href="">text</a></li>
        <li><a href="">text</a></li>
        <li><a href="">text</a></li>
        <li><a href="">text</a></li>
      </ul>
    </div>
  </div>
</main>

即使这样，在某些时候 .ad_block 也会开始滚动。这是因为您已将（不同的）高度值设置为 div.left_content 和 div.ad_block

如何让 position:sticky 的右菜单块不覆盖在 header 上？

How can I make right menu block with position:sticky don't overlaid on header?

html

css

scroll

position

css-position