Por qué posición: pegajoso no funciona cuando el elemento está envuelto dentro de otro?

Estoy experimentando con la navegación fija y me encontré con un problema. El problema es que cuando pongo el navegador en otro elemento ya no es pegajoso.

.nav-wrapper{
  position: absolute; 
  bottom: 0;
}

.nav-wrapper nav{
  position: sticky;
  top: 0;
}
    <div class="nav-wrapper">
     <nav>
      <a href="#"><li>Home</li></a>
      <a href="#"><li>About</li></a>
     </nav>
    </div>

Respuestas a la pregunta(1)

Su respuesta a la pregunta