Überblick und Anwendung von Positionsattributen (absolut|relativ|statisch|fest) in CSS

Schauen wir uns zunächst die Definition des Positionsattributs in der CSS3-API an:

• statisch: Keine spezielle Positionierung, das Objekt folgt dem normalen Dokumentfluss. Die Eigenschaften oben, rechts, unten, links usw. werden nicht angewendet.
• relativ: Das Objekt folgt dem normalen Dokumentfluss, wird jedoch entsprechend den Eigenschaften oben, rechts, unten, links und anderen im normalen Dokumentfluss versetzt. Die Stapelung wird durch die Z-Index-Eigenschaft definiert.
• absolut: Das Objekt wird vom normalen Dokumentfluss getrennt und mithilfe von Eigenschaften wie oben, rechts, unten und links absolut positioniert. Die Stapelung wird durch die Z-Index-Eigenschaft definiert.
• behoben: Das Objekt wird vom normalen Dokumentfluss getrennt und mit dem Fenster als Referenzpunkt positioniert, wobei die Eigenschaften oben, rechts, unten, links und andere verwendet werden. Wenn eine Bildlaufleiste angezeigt wird, wird das Objekt nicht mitgescrollt. Die Stapelung wird durch die Z-Index-Eigenschaft definiert.

Wie wäre es damit? Sind Sie immer noch verwirrt? Das macht nichts. Lassen Sie es mich Ihnen anhand einiger grundlegender Konzepte Schritt für Schritt erklären:

Was ist Dokumentenfluss?

Teilen Sie das Formular von oben nach unten in Zeilen auf und ordnen Sie die Elemente in jeder Zeile von links nach rechts an. Dies stellt den Dokumentfluss dar.

Es gibt nur drei Situationen, in denen ein Element außerhalb des Dokumentflusses liegt: schwebend , absolute Positionierung und relative Positionierung .

Statische Positionierung (statisch):

statisch, keine spezielle Positionierung, dies ist der Standardpositionierungsmodus von HTML-Elementen, d. h. wenn wir das Positionsattribut des Elements nicht festlegen, ist der Standardpositionswert statisch und folgt dem normalen Dokumentflussobjekt. Das Objekt nimmt den Dokumentbereich ein. Bei diesem Positionierungsmodus sind die Attribute oben, rechts, unten, links, Z-Index und andere ungültig.

Relative Positionierung:

Die relative Positionierung, auch als relative Positionierung bezeichnet, kann wörtlich als das Hauptmerkmal dieses Attributs interpretiert werden: relativ. Aber relativ wozu? Dies ist der entscheidende Punkt und für mich auch der verwirrendste Teil. Machen wir jetzt einen Test, ich denke, jeder wird es verstehen:

(1) Zunächst nicht positioniert

(2) Wir verändern das Positionsattribut des ersten Elements:

-- >> Die gepunktete Linie ist der Anfangspositionsraum

Jetzt verstehen Sie, dass die relative Positionierung relativ zu ihrer ursprünglichen Position im Dokumentfluss ist, und wir wissen auch, dass die relative Positionierung auch dem normalen Dokumentfluss folgt, sie weicht nicht vom Dokumentfluss ab, aber ihre Attribute oben/links/rechts/unten sind wirksam. Man kann sagen, dass es ein Zwischenübergangsattribut von statisch zu absolut ist. Das Wichtigste ist, dass es immer noch Dokumentraum einnimmt, und der eingenommene Dokumentraum ändert sich nicht mit dem Versatz der Attribute oben/rechts/links/unten, d. h. die Elemente dahinter werden entsprechend der gepunkteten Linienposition positioniert (bevor die Attribute oben/links/rechts/unten wirksam werden). Dies muss verstanden werden.

OK, wir wissen also, dass die Eigenschaften Oben/Rechts/Links/Unten den Dokumentbereich, der von einem relativ positionierten Element belegt wird, nicht ausgleichen. Aber werden die Ränder/Füllungen diesen Dokumentbereich ausgleichen? Die Antwort ist ja. Lassen Sie uns gemeinsam ein Experiment durchführen:

(3) Randattribut hinzufügen:

Ist das im Vergleich nicht ganz klar? Wir setzen zuerst den Rand des ersten Elements auf 20px, dann muss das zweite Element um 40px nach unten versetzt werden, damit der Rand den Dokumentraum einnimmt! Ebenso können Sie die Wirkung der Polsterung selbst messen!

Absolute Positionierung:

Absolute Positionierung, auch als absolute Positionierung bekannt, obwohl der Name „absolut“ lautet, ähnelt seine Funktion eher dem Wort „relativ“. Warum sagen Sie das? Es stellt sich heraus, dass ein mit Absolute positioniertes Element, nachdem es den Dokumentfluss verlassen hat, nur basierend auf einem Vorgängerelement (über dem übergeordneten Element) positioniert werden kann und dieses Vorgängerelement auf eine nicht statische Weise positioniert werden muss. Wenn beispielsweise ein Element mit Absolute positioniert wird, beginnt es bei der übergeordneten Klasse und sucht nach einem Vorgängerelement, das auf eine nicht statische Weise positioniert ist (beachten Sie, dass es ein direkter Vorgänger sein muss~), bis zum <html>-Tag. Es sollte hier auch beachtet werden, dass die relativen und statischen Methoden das <body>-Tag als Ursprung für die Positionierung in der äußersten Ebene verwenden, während die Absolute-Methode <html> als Ursprung für die Positionierung verwendet, wenn kein übergeordnetes Element vorhanden ist und die Position nicht statisch ist. Die Elemente <html> und <body> unterscheiden sich um etwa 9px. Schauen wir uns die Wirkung an:

(4) Fügen Sie das Attribut „absoulte“ hinzu:

Haha, nachdem sie den obigen Code gelesen haben, werden aufmerksame Freunde sicherlich fragen, warum wir der absoluten Positionierung die Attribute top:0; left:0; hinzufügen müssen. Ist das nicht überflüssig?

Tatsächlich ist es absolut notwendig, diese beiden Attribute hinzuzufügen, denn wenn wir absolute oder feste Positionierung verwenden, müssen wir mindestens eines der Attribute left, right, top und bottom angeben. Andernfalls verwenden die Attribute left/right/top/bottom ihren Standardwert „auto“, wodurch das Objekt den normalen HTML-Layoutregeln folgt und unmittelbar nach dem vorherigen Objekt gerendert wird . Kurz gesagt, sie werden alle relativ und beanspruchen Dokumentplatz. Das ist sehr wichtig. Viele Leute stellen fest, dass sie nach Verwendung der absoluten Positionierung nicht aus dem Dokumentfluss herauskommen. Das ist der Grund. Achten Sie hier besonders darauf~~~

Wenn die Attribute links/rechts/oben/unten fehlen, funktioniert es nicht. Was also, wenn wir mehr davon festlegen? Wenn wir beispielsweise die oberen und unteren Attributwerte gleichzeitig festlegen, wohin soll das Element versetzt werden? Beachten Sie die folgenden Regeln:

• Wenn oben und unten gleichzeitig vorhanden sind, ist nur oben wirksam.
• Wenn links und rechts nebeneinander existieren, ist nur links wirksam.

Da das Absolute entsprechend der Position des nicht statischen Elements in der Vorgängerklasse positioniert wird, wird der Rand/die Polsterung in der Vorgängerklasse die Position beeinflussen? Schauen wir uns zunächst ein Beispiel an:

(5) Fügen Sie der absoluten Positionierung Rand-/Füllungsattribute hinzu:

Ich verstehe, dass der Rand der Vorgängerklasse dazu führt, dass sich der Absolutwert der Unterklasse verschiebt, dass die Polsterung jedoch nicht dazu führt, dass sich der Absolutwert der Unterklasse verschiebt. Zusammenfassend lässt sich sagen, dass Absolute entsprechend der Grenze der Vorgängerklasse positioniert ist.

Hinweis: Wenn Sie ein Objekt absolut außerhalb des sichtbaren Bereichs positionieren, werden Bildlaufleisten angezeigt. Wenn Sie ein relativ positioniertes Objekt außerhalb des sichtbaren Bereichs platzieren, wird die Bildlaufleiste nicht angezeigt.

Feste Positionierung:

Feste Positionierung, auch als feste Positionierung bezeichnet, ist dasselbe wie absolute Positionierung, da sie vom Dokumentfluss getrennt ist und entsprechend den Attributen oben, rechts, links und unten positioniert werden kann. Der Unterschied besteht darin, dass die feste Positionierung basierend auf dem Fenster als Ursprung versetzt ist, was bedeutet, dass sie nicht entsprechend dem Scrollen der Bildlaufleiste versetzt wird.

z-index-Eigenschaft:

Z-Index, auch als Stapelreihenfolge von Objekten bekannt, verwendet eine Ganzzahl, um die Stapelebene zu definieren. Je größer der Ganzzahlwert, desto höher wird gestapelt. Dies bezieht sich natürlich auf die Stapelung zwischen Elementen derselben Ebene. Wenn dieses Attribut zweier Objekte denselben Wert hat, werden sie entsprechend der Reihenfolge gestapelt, in der sie im HTML-Dokument fließen, und das später geschriebene Objekt überdeckt das davor liegende. Es ist zu beachten, dass die Eltern-Kind-Beziehung nicht mithilfe des Z-Index festgelegt werden kann. Das Kind muss oben und das Elternteil unten sein.

Hinweis: Die Z-Index-Eigenschaft von Elementen mit statischer Positionierung oder keiner Positionspositionierung ist ungültig.