Wie kann CSS-Positionierung eine relative Elementplatzierung innerhalb eines Containers erreichen?

CSS-Positionierung für relative Elementplatzierung

Ihre Suche nach einer browserübergreifenden, standardkonformen und wartbaren Methode zum Positionieren von Elementen relativ zur oberen linken Ecke ihres Containers kann durch CSS-Positionierung erreicht werden. Lassen Sie uns untersuchen, wie es geht:

Relative Positionierung

CSS-Position: relativ; legt die Position eines Elements relativ zu sich selbst fest. Es bleibt während des Layouts im normalen Fluss und wird dann um die angegebenen Werte versetzt. Beachten Sie, dass sich andere Elemente in der Umgebung nicht mit verschieben.

Absolute Positionierung

Position: absolut; positioniert ein Element relativ zu seinem Container. Standardmäßig ist der Container das Browserfenster. Wenn für ein übergeordnetes Element jedoch „position: relative“ oder „position: absolute“ festgelegt ist, wird es zum übergeordneten Element für die Positionierungskoordinaten seiner untergeordneten Elemente.

Beispiel

Bedenken Sie diesen Code:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

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

<div>

In diesem Beispiel ist #box absolut innerhalb des #containers positioniert. Sein oberer Rand ist 50 Pixel vom oberen Rand des Containers entfernt und sein linker Rand ist 20 Pixel von der linken Seite des Containers entfernt.

Das obige ist der detaillierte Inhalt vonWie kann CSS-Positionierung eine relative Elementplatzierung innerhalb eines Containers erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!