Layout - Positionierung

position	Flussverhalten
static	default Wert; im Standardfluss; Element ist nicht positioniert
relative	von Fluss Position wegbewegen und dort Lücke lassen
fixed	immer an gleicher Position im Fenster (auch beim Scrollen) ^{ⓘEine Mischform ist position: sticky; Positionierung ist relative, bis es durch Scrollen die fixed position erreicht↩}
absolute	am nähsten positionierten Elternelement ausgerichtet

Positionieren mit top, bottom, left, right, z-index

HTML<div class="popup">
  <button>OK</button>
  <p>Text im <em>Popup</em>!</p>
</div>
<h1>Beispiel</h1>
<p>Hier ist der Text der Seite</p>
<p>Noch mehr Text</p>

CSS.popup {
  position: fixed;
  left: 10%;
  right: 10%;
  top: 20vh;
  background: yellow;
  height: 100px;
  z-index: 10;
}
.popup button {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.popup em {
  position: relative;
  top: -5px;
}

Komplexere Layouts

nicht mehr über Tabellen
Flex: display: flex | inline-flex; vertikale oder horizontale Positionierung von Elementen mit Einstellungen für Anordnung und Platzverteilung; Spiel zum Lernen
Grid: display: grid | inline-grid; Anordnung von Elementen in einem selbst definierten Gitter; Spiel zum Lernen