Kennen Sie diese fünf gängigen Methoden zur absoluten Positionierung?

Fünf gängige absolute Positionierungsmethoden, kennen Sie sie alle?

Absolute Positionierung ist eine häufig verwendete Positionierungsmethode in CSS, die es ermöglicht, ein Element relativ zu seinem nächstgelegenen positionierten Vorgängerelement zu positionieren. In diesem Artikel behandeln wir fünf gängige Methoden der absoluten Positionierung und stellen für jede spezifische Codebeispiele bereit.

1. Positionierung oben, rechts, unten, links

Die gebräuchlichste absolute Positionierungsmethode besteht darin, die Attribute oben, rechts, unten und links zum Positionieren von Elementen zu verwenden. Durch Angabe der Werte dieser Eigenschaften können wir die Position eines Elements relativ zu seinem übergeordneten Element steuern.

<div style="position: relative;">
  <div style="position: absolute; top: 10px; right: 10px;">我在右上角</div>
</div>

Der obige Code positioniert das zweite div-Element in der oberen rechten Ecke seines übergeordneten Elements, 10 Pixel von oben und rechts entfernt.

2. Prozentuelle Positionierung

Zusätzlich zur Verwendung spezifischer Pixelwerte können wir auch Prozentsätze zur Positionierung von Elementen verwenden. Die prozentuale Positionierung ist relativ zur Breite und Höhe des übergeordneten Elements. Beispielsweise können wir 50 % verwenden, um das Element horizontal zu zentrieren.

<div style="position: relative;">
  <div style="position: absolute; left: 50%;">我水平居中</div>
</div>

Der obige Code positioniert das zweite div-Element horizontal zentriert auf seinem übergeordneten Element.

3. Offset-Positionierung

Offset-Positionierung bedeutet, ein Element zu positionieren, indem sein Offset von seiner ursprünglichen Position angegeben wird. Wir können negative Werte verwenden, um ein Element nach oben oder links zu verschieben, und positive Werte, um ein Element nach unten oder rechts zu verschieben.

<div style="position: relative;">
  <div style="position: absolute; top: -20px; left: -20px;">我向上和向左偏移了</div>
</div>

Der obige Code verschiebt das zweite div-Element um 20 Pixel nach oben und links.

4. Stapelpositionierung

Stapelpositionierung bezieht sich auf die Steuerung der Stapelreihenfolge von Elementen durch Angabe des Z-Index-Attributs des Elements. Je größer der Z-Index-Wert eines Elements ist, desto höher wird es angezeigt.

<div style="position: relative;">
  <div style="position: absolute; top: 10px; left: 10px; z-index: 1;">我在上面</div>
  <div style="position: absolute; top: 20px; left: 20px; z-index: 2;">我在下面</div>
</div>

Der obige Code zeigt das zweite div-Element über dem ersten div-Element an.

5. Feste Positionierung

Feste Positionierung bedeutet, dass das Element relativ zur Position des Browserfensters positioniert wird. Unabhängig davon, wie sich die Bildlaufleiste bewegt, bleibt das Element an einer festen Position.

<div style="position: fixed; top: 10px; right: 10px;">我固定在右上角</div>

Der obige Code fixiert das Element in der oberen rechten Ecke des Browserfensters.

Durch die Beherrschung dieser fünf gängigen Methoden zur absoluten Positionierung können wir Elemente auf Webseiten flexibler steuern und anordnen. Ich hoffe, dieser Artikel kann Ihnen helfen, die absolute CSS-Positionierung zu verstehen und zu verwenden.

Das obige ist der detaillierte Inhalt vonKennen Sie diese fünf gängigen Methoden zur absoluten Positionierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!