如何从 CSS 中的溢出 div 中获得绝对定位的元素

Question

我喜欢带有滚动条的侧边栏来查看更多内容。我也有每个项目的导航菜单。导航菜单是绝对位置，就像一个浮动框。它随着它应该滚动的内容滚动。但是，由于overflow-y，它无法离开其容器。

我怎样才能绕过它？

需要工作

• 侧边栏需要在 y 方向可滚动，但在 x 方向不能滚动。
• 导航菜单必须是绝对的，因为它需要浮动在事物之上。
• 导航菜单在滚动时需要跟随内容，因为它是项目的一部分。
• 不知何故，导航菜单需要能够位于这两个区域的顶部。
• 我希望将 CSS 解决方案作为首选，但如果有一个聪明的解决方案并且 CSS 不起作用，我愿意接受 JS。

.body {
  background: green;
}
.wrap {
  height: 200px;
  width: 200px;
  background: #eee;
  overflow-y: auto;
}

aside {
  background: yellow;
  position: relative;
}

nav {
  position: absolute;
  background: #fff;
  outline: 1px solid red;
  margin-left: 100px;
  width: 200px;
  z-index: 1000;
}

<div class="body">
  <div class="wrap">
    <aside>
      <div>Item</div>
      <div>Item
        <nav>Navigation box sdfds</nav>
      </div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
      <div>Item</div>
    </aside>
  </div>
</div>

Answer 1

您可以使用此 css 规则进行导航：position: sticky