Was bedeutet absolute Positionierung in CSS?

Absolute Positionierung in CSS ist eine gängige Layouttechnik, mit der die Position von Elementen auf der Seite präzise gesteuert werden kann, z. B. relative Positionierung und feste Positionierung ist unabhängig von anderen Elementen. Durch Festlegen des Positionierungsattributs und des Koordinatenwerts des Elements kann das Element an der angegebenen Position platziert werden, ohne dass es von anderen Elementen beeinflusst wird. Die absolute Positionierung wird häufig in Verbindung mit der relativen Positionierung verwendet, um verschiedene Layouteffekte zu erzielen und die Stapelreihenfolge von Elementen über das Z-Index-Attribut zu steuern.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

Absolute Positionierung in CSS ist eine gängige Layouttechnik, mit der die Position eines Elements auf der Seite präzise gesteuert werden kann. Im Vergleich zu anderen Positionierungsmethoden wie relativer Positionierung und fester Positionierung kann die absolute Positionierung dazu führen, dass Elemente aus dem Dokumentfluss ausbrechen und unabhängig von anderen Elementen positioniert werden. Durch Festlegen der Positionierungseigenschaften und Koordinatenwerte des Elements kann das Element an einer bestimmten Position platziert werden, ohne dass es von anderen Elementen beeinflusst wird.

Lassen Sie uns zunächst die Positionierungsattribute in CSS verstehen. In CSS gibt es vier häufig verwendete Positionierungsattribute: statische Positionierung (statisch), relative Positionierung (relativ), absolute Positionierung (absolut) und feste Positionierung (fest). Unter diesen ist die absolute Positionierung ein Thema, das wir ausführlich besprechen werden.

In CSS kann die Verwendung einer absoluten Positionierung erreicht werden, indem das Positionsattribut des Elements auf „absolut“ gesetzt wird. Wenn ein Element auf absolute Positionierung eingestellt ist, wird es vom Dokumentfluss getrennt und relativ zum nächstgelegenen übergeordneten Element positioniert, das über ein Positionierungsattribut verfügt (nicht statisch). Wenn kein übergeordnetes Element mit einem positionierten Attribut gefunden wird, wird das Element relativ zum anfänglichen enthaltenden Block des Dokuments positioniert.

Als nächstes werfen wir einen Blick darauf, wie die absolute Positionierung funktioniert und wie man sie nutzt.

1. Setzen Sie das Positionierungsattribut des Elements auf „absolut“.

In CSS kann ein Element auf absolute Positionierung eingestellt werden, indem sein Positionsattribut auf „absolute“ gesetzt wird. Beispiel:

   .box {
     position: absolute;
   }

2. Geben Sie die Position des Elements an.

Durch Festlegen der Attribute „oben“, „rechts“, „unten“ und „links“ des Elements können Sie die Position des Elements relativ zum übergeordneten Element oder zum Dokument, das den Block enthält, festlegen. Diese Eigenschaften werden verwendet, um die Werte für den oberen, rechten, unteren und linken Rand eines Elements zu bestimmen. Zum Beispiel:

   .box {
     position: absolute;
     top: 50px;
     left: 100px;
   }

3. Bestimmen Sie das Referenzobjekt.

Absolut positionierte Elemente müssen relativ zu einem Referenzobjekt positioniert werden. Wenn kein Referenzobjekt angegeben ist, wird das Element relativ zum ursprünglichen enthaltenden Block des Dokuments positioniert. Sie können ein Referenzobjekt angeben, indem Sie das Positionsattribut des übergeordneten Elements des Elements auf „relativ“ oder „absolut“ setzen. Zum Beispiel:

   .container {
     position: relative;
   }
   .box {
     position: absolute;
     top: 50px;
     left: 100px;
   }

4. Behandeln Sie die Stapelreihenfolge.

Wenn auf der Seite mehrere absolut positionierte Elemente vorhanden sind, können sich die Elemente überlappen oder blockiert werden. Um die Stapelreihenfolge von Elementen zu steuern, können Sie das Z-Index-Attribut verwenden. Das Z-Index-Attribut wird verwendet, um die Stapelreihenfolge von Elementen anzugeben. Elemente mit größeren Werten überdecken Elemente mit kleineren Werten. Zum Beispiel:

   .box1 {
     position: absolute;
     top: 50px;
     left: 100px;
     z-index: 2;
   }
   .box2 {
     position: absolute;
     top: 100px;
     left: 200px;
     z-index: 1;
   }

Nutzungsszenarien und Vorteile der absoluten Positionierung:

1. Präzise Steuerung der Position von Elementen: Durch die absolute Positionierung kann die Position von Elementen auf der Seite genau gesteuert werden, ohne dass sie von anderen Elementen beeinflusst wird. Dies ist sehr nützlich, um bestimmte Layouteffekte zu implementieren, z. B. schwebende Menüs, Popup-Boxen usw.

2. Wird in Verbindung mit der relativen Positionierung verwendet: Die absolute Positionierung wird normalerweise in Verbindung mit der relativen Positionierung verwendet, indem Sie das Positionsattribut des übergeordneten Elements auf „relativ“ setzen und so einen Container erstellen, der relativ zum übergeordneten Element positioniert ist ein flexiblerer Layouteffekt.

3. Stapelsteuerung: Über das Z-Index-Attribut können Sie die Stapelreihenfolge absolut positionierter Elemente steuern, um Okklusions- und Überlappungseffekte von Elementen zu erzielen.

4. Responsive Design: Durch die absolute Positionierung können konsistente Layouteffekte auf verschiedenen Bildschirmauflösungen und Geräten erzielt werden, was Komfort für responsives Design bietet.

Absolute Positionierung weist jedoch auch einige Einschränkungen und Vorsichtsmaßnahmen auf:

1 Elemente brechen aus dem Dokumentfluss: Absolut positionierte Elemente brechen aus dem Dokumentfluss und können Auswirkungen auf das Seitenlayout haben. Es muss darauf geachtet werden, dass sich Elemente nicht mit anderen Inhalten überschneiden oder diese blockieren.

2. Auswahl der Referenzobjekte: Sie müssen sicherstellen, dass Sie das richtige Referenzobjekt für die Positionierung auswählen, da sonst die Position der Elemente ungenau oder falsch ausgerichtet sein kann.

3. Berücksichtigung des Responsive Designs: Bei der Verwendung der absoluten Positionierung müssen Sie die Layouteffekte unter verschiedenen Geräten und Bildschirmauflösungen berücksichtigen und eine entsprechende Anpassung und Responsive Design durchführen.

Zusammenfassend lässt sich sagen, dass die absolute Positionierung in CSS eine häufig verwendete Layouttechnik ist, die eine präzise Steuerung der Position von Elementen auf der Seite ermöglicht. Durch Festlegen der Positionierungseigenschaften und Koordinatenwerte des Elements kann das Element unabhängig von anderen Elementen an einer bestimmten Position platziert werden. Die absolute Positionierung wird häufig in Verbindung mit der relativen Positionierung verwendet, um verschiedene Layouteffekte zu erzielen und die Stapelreihenfolge von Elementen über das Z-Index-Attribut zu steuern. Wenn Sie jedoch die absolute Positionierung verwenden, müssen Sie auf Elemente achten, die aus dem Dokumentfluss ausbrechen, das richtige Referenzobjekt auswählen und Überlegungen zum responsiven Design anstellen.

Das obige ist der detaillierte Inhalt vonWas bedeutet absolute Positionierung in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!