Immer wenn ich die absolute Positionierung vertikal zentriere, verschwindet das gesamte Nav

Question

ul { 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333333; 
    position: relative; 
    li { 
     height: auto; 
     width: 20%; 
     position: absolute; 
     top: 50%; 
     transform: translateY(-50%); 
     a { 
      display: block; 
      color: white; 
      text-align: center; 
      padding: 16px; 
      text-decoration: none; 
     } 
    } 
    .float-left { 
     float: left; 
     font: 2em bold sans-serif; 
    } 
} 

Hier ist mein HTML für den Kontext. Ich habe ein weiteres div hinzugefügt, um die vertikale Zentrierung auf einem anderen Element zu testen, und es funktioniert gut. Aber ich konnte nicht verhindern, dass die Li's auf dem Nav verschwinden, wenn ich ihnen absolute Positionierungen gebe. Tut mir leid, es ist in Sass.

<ul> 
     <li class="float-left"><a href="">Michael Thomas</a></li> 
     <li><a href="">About</a></li> 
     <li><a href="">R&eacute;sum&eacute;</a></li> 
     <li><a href="">Portfolio</a></li> 
     <li><a href="">Contact</a></li> 
    </ul> 

Answer 1

Wenn die "li" inline/relativ sind, erzwingen sie, dass das übergeordnete Element "ul" die Dimensionen der untergeordneten Elemente annimmt. Wenn Sie jedoch die "li" in absolute Position ändern, erzwingen die "li" nicht länger, dass das übergeordnete Element "ul" die Form seines Inhalts umfasst, sodass das übergeordnete "ul" eine Höhe und Breite von null aufweist. Wenn Sie den "Überlauf: Versteckt" auf dem Eltern entfernt haben, denke ich, dass Sie seinen Inhalt noch sehen würden. Ich denke, du musst deinem nav/ul eine Höhe und Breite geben.