Wie kann ich Elemente mithilfe von CSS präzise in ihren Containern positionieren?

Elemente relativ zu ihren Containern positionieren

Beim Erstellen von Elementen, die innerhalb ihrer Container positioniert werden müssen, bietet CSS flexible Optionen, die eine präzise Steuerung ermöglichen und browserübergreifende Kompatibilität.

Position: relativ

• Positioniert ein Element relativ zu sich selbst.
• Element wird aus dem normalen Fluss entfernt und um angegebene Werte (oben, rechts, unten, links) versetzt.
• Hat keinen Einfluss auf das Layout der umgebenden Elemente.

Position: absolut

• Positioniert ein Element relativ zu einem Container.
• Standardmäßig ist der Container das Browserfenster.
• Wenn ein übergeordnetes Element eine Position hat: relativ oder position: absolute Menge, es fungiert als übergeordnetes Element für die Positionierung Kinder.

Beispiel:

<div>
<pre class="brush:php;toolbar:false">#container {
  position: absolute;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: relative;
  top: 50px;
  left: 20px;
}

Dieser Code positioniert das #box-Element 50 Pixel von oben und 20 Pixel von links vom # Containerelement, das eine präzise Kontrolle über seine Platzierung innerhalb seines Containers ermöglicht.