How to have an absolute positioned element out of an overflow div in CSS

Question

I have like a sidebar with a scrollbar to see more content. I also have a nav menu for each item. The nav menu is position absolute like a floating box. It scrolls with the content which it should. However, it can't get out of its container because of the overflow-y.

How can I get around it?

Needs to work

• The sidebar needs to be scrollable in y but not in x.
• The nav menu needs to be absolute because it needs to float on top of things.
• The nav menu needs to follow the content when scrolling as it's a part of the item.
• Somehow the nav menu needs to be able to be on top of both areas.
• I would love a CSS solution as a first choice, but I'm open to JS if there is a clever solution and CSS does not work.

.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

You can use this css rule for nav: position: sticky