Applying position: fixed, to elements inside of a position: absolute parent container

Question

I have a div which functions as an overlay over the body, when the overlay is active, scrolling on the document body is disabled, but any overflow on the overlay is set to overflow-y: scroll.

.showComments {
  animation: show-comments 250ms forwards;
  height: 100vh;
  width: 100vw;
  background-color: black;
  z-index: 1;
  position: absolute;
  overflow-y: scroll;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.showComments is my parent container. Inside of it, I have a nav child, I would like to apply a position: fixed to my nav, so that it stays flush on the top of the page during any user scrolling. Is this possible to implement or are there any workarounds? Not sure if helpful but also added my CSS for the nav

NAV

.nav {
  border-bottom: $nav-border;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  color: $color-white;

  h3 {
    font-family: $font-primary;
    font-weight: 600;
    font-size: 1.1rem;
  }

  svg {
    font-size: $icon-size;
    cursor: pointer;
  }
}

Answer 1

You can pull out the nav outside of the overlay and make it sibling as shown below. Set the parent to relative and position the two children elements with absolute or fixed as needed.

.overlay-wrap{
  display: relative;
  width: 100vw;
  height: 100vh;
}
.overlay{
  position: absolute;
  inset: 0 0 0 0;
  background: black;
  opacity: .7;
}
.nav{
  position: fixed;
  top:0;
  left: 0;
  right:0;
  height: 4rem;
  list-style:none;
  display: flex;
  background: green;
  z-index: 2;
}
li{
margin-right: 1rem;
}

<div class="overlay-wrap">
  <nav class="nav">
    <li>HOME</li>
    <li>LOGIN</li>
  </nav>
  <div class="overlay"></div>
</div>