Im CSS-Positionsattribut: der Unterschied zwischen absolut und relativ

Wenn Sie Position zum Layouten der Seite verwenden, muss das Positionsattribut des übergeordneten Elements relativ sein, und zwar für Elemente, die an einer bestimmten Position innerhalb des übergeordneten Elements positioniert sind , verwenden Sie am besten Absolut, da es nicht vom Attribut padding des übergeordneten Elements beeinflusst wird. Natürlich können Sie auch Position verwenden, aber vergessen Sie nicht den Wert der Auffüllung bei der Berechnung. ”

Der Standardpositionsattributwert jedes Elements ist statisch, statisch Heute spricht die 51RGB Q-Gruppe 186242343 hauptsächlich von relativ (relativ) und absolut (absolut).

[position:absolute]
bedeutet: Er meint absolute Positionierung, standardmäßig in der oberen linken Ecke des Browsers. kombiniert mit TOP, RIGHT, BOTTOM, LEFT (im Folgenden als TRBL bezeichnet) zur Positionierung, hat die folgenden Attribute:
1) Wenn kein TRBL vorhanden ist, verwenden Sie das Obermaterial linke Ecke des übergeordneten Elements. Wenn kein übergeordnetes Element vorhanden ist, bezieht es sich auf die obere linke Ecke des Browsers. Wenn Text ohne übergeordnetes Element vorhanden ist, wird er mit der oberen rechten Ecke des letzten Texts davor positioniert als Ursprung, aber ohne den Text zu unterbrechen und ihn oben zu verdecken.
2) Wenn TRBL festgelegt ist und das übergeordnete Element das Positionsattribut nicht festlegt, wird der aktuelle Absolutwert mit der oberen linken Ecke des Browsers als Originalpunkt positioniert, und die Position wird angezeigt bestimmt durch TRBL.
3) Wenn TRBL festgelegt ist und das übergeordnete Element das Positionsattribut festlegt (sei es absolut oder relativ), wird die obere linke Ecke des übergeordneten Elements als Ausgangspunkt für die Positionierung verwendet, und die Position wird festgelegt bestimmt durch TRBL. Selbst wenn das übergeordnete Element über ein Padding-Attribut verfügt, hat es keinen Einfluss darauf. Vereinfacht ausgedrückt: Es besteht nur auf einem Punkt und verwendet die obere linke Ecke des übergeordneten Elements als Ursprung für die Positionierung überhaupt.

Die oben genannten drei Punkte können zusammengefasst werden. Wenn Sie ein Element mit absolutem Positionierungsattribut innerhalb seines übergeordneten Elements positionieren möchten, müssen nur zwei Bedingungen erfüllt sein,
Erstens: TRBL festlegen
Zweitens: Positionsattribut des übergeordneten Elements festlegen
Die obige Zusammenfassung ist sehr wichtig, um sicherzustellen, dass Sie Absolue zum Layouten der Seite verwenden wird nicht falsch ausgerichtet und ändert sich nicht mit der Größe des Browsers oder der Größe der Bildschirmauflösung.
Solange Unzufriedenheit besteht, nimmt das Element die obere linke Ecke des Browsers als Ursprung. Hier machen Anfänger häufig Fehler, wenn sich die Größe des positionierten Abschnitts ändert. Das übergeordnete Element ändert sich entsprechend, aber die Position des Abschnitts und des übergeordneten Elements, deren Positionsattribut auf

absolut eingestellt ist, hat sich geändert und ist falsch ausgerichtet. Dies liegt daran, dass das Element in positioniert ist Die obere rechte Ecke des Browsers ist der Grund dafür, dass der Winkel der Ursprung ist.
Ein einfacher Fehler für Anfänger besteht darin, den Abschnitt nicht zu kennen, dessen Positionsattribut absolut ist. Wenn Sie ihn im übergeordneten Abschnitt positionieren möchten, und wenn sich die Größe des Browsers oder die Auflösung ändert Wenn sich das Layout nicht ändert, müssen zwei Bedingungen erfüllt sein. Solange eine davon nicht erfüllt ist, nimmt das Element die obere linke Ecke des Browsers als Ursprung, was das Seitenlayout ist falsch ausgerichtet.

[position:relative]
Es bezieht sich auf den ursprünglichen Punkt des übergeordneten Elements als den ursprünglichen Punkt Wenn kein übergeordnetes Element vorhanden ist, wird der untere Teil des vorherigen Elements in der Reihenfolge des Textflusses als Originalpunkt verwendet und mit TRBL positioniert Der ursprüngliche Punkt der aktuellen Ebene basiert auf dem ursprünglichen Punkt des übergeordneten Inhaltsbereichs. Die Positionierung hat die folgenden Attribute:
1) Wenn kein TRBL vorhanden ist, ist es die obere linke Ecke des übergeordneten Inhaltsbereichs Wenn kein übergeordnetes Element vorhanden ist, bezieht es sich auf die obere linke Ecke des Browsers (gehen Sie hier und absolut zuerst). Wenn Text ohne übergeordnetes Element vorhanden ist, wird der untere Teil des Texts als ursprünglicher Punkt für die Positionierung verwendet und der Text ist getrennt (anders als absolut).
2) Wenn TRBL gesetzt ist und das übergeordnete Element das Positionsattribut nicht festlegt, wird die obere linke Ecke des übergeordneten Elements weiterhin als Ursprung für die Positionierung verwendet (anders als absolut)
3) Wenn TRBL festgelegt ist und das übergeordnete Element das Positionsattribut festlegt (ob absolut oder relativ), wird die obere linke Ecke des übergeordneten Elements als Ursprung für die Positionierung verwendet und die Position wird durch TRBL (das erste) bestimmt die Hälfte ist dasselbe wie die absolute). Wenn das übergeordnete Element über ein Padding-Attribut verfügt, wird die obere linke Ecke des Inhaltsbereichs als Ausgangspunkt für die Positionierung verwendet (die zweite Hälfte unterscheidet sich von der absoluten).

Aus den oben genannten drei Punkten lässt sich schließen, dass unabhängig davon, ob das übergeordnete Element vorhanden ist oder nicht, ob TRBL vorhanden ist oder nicht, die obere linke Ecke des übergeordneten Elements positioniert ist, das Padding-Attribut jedoch nicht des Elternteils wird seine Auswirkung haben. Basierend auf der obigen Beschreibung von relativ können wir das p, dessen Positionsattribut relativ ist, als gewöhnliches p betrachten, das mit TRBL positioniert werden kann, oder wir müssen nur Position zum CSS-Attribut von p in unserer üblichen Layoutseite hinzufügen Nach :relative können Sie nicht nur float zum Layouten der Seite verwenden, sondern auch TRBL zum Layouten der Seite. Mit anderen Worten: Durch Hinzufügen von position:relative p kann die Seite auch wie ein normales p gestaltet werden, Sie können aber auch TRBL verwenden um die Seite zu gestalten. Aber das Positionsattribut ist absolut Es kann nicht zum Layouten der Seite verwendet werden, da bei Verwendung für das Layout alle ps relativ zur oberen linken Ecke des Browsers positioniert werden, sodass es nur zum Positionieren eines Elements irgendwo innerhalb eines Elements mit dem absoluten Attribut In verwendet werden kann Auf diese Weise können wir die wichtigeren Schlussfolgerungen zusammenfassen. Da das Element mit dem absoluten Attribut zum Lokalisieren der Position eines Elements im übergeordneten Element verwendet wird, ist TRBL gemäß dem eingangs erwähnten dritten Artikel unverzichtbar Wenn das übergeordnete Element nicht über das Positionsattribut
verfügt, wird das absolute Element vom übergeordneten Element getrennt. Wenn es sich jedoch um eine Layoutseite handelt, kann das Positionsattribut des übergeordneten Elements nicht absolut sein Andernfalls ist die obere linke Ecke des Browsers der Ursprung, also das übergeordnete Element. Das Positionsattribut von Ebenenelementen kann nur relativ sein!

Elemente mit dem relativen Attribut können zum Layouten der Seite verwendet werden, und Elemente mit dem absoluten Attribut können zum Positionieren eines Elements im übergeordneten Element

verwendet werden Zusammenfassung: Wenn die Position zum Layouten der Seite verwendet wird, muss das Positionsattribut des übergeordneten Elements relativ sein. Für Elemente, die an einer bestimmten Position innerhalb des übergeordneten Elements positioniert sind, ist es am besten, „absolut“ zu verwenden, da dies davon nicht beeinflusst wird das padding-Attribut des übergeordneten Elements Natürlich können Sie auch die Position verwenden, aber vergessen Sie bei der Berechnung nicht den Wert von padding.
Die Positionierung hat jedoch einen Nachteil: Sie passt sich nicht an die Höhe interner Elemente an. Wenn wir also normalerweise die Seite gestalten und sich die Höhe eines oder einiger Module nie ändert, kann sie verwendet werden Positionierung, aber Fan empfiehlt, beim Layout der Seite weiterhin Float als Hauptmethode und Position als Ergänzung zu verwenden! Nur so können Sie qualitativ hochwertige Seiten erstellen.

Zum Schluss erinnern Sie sich bitte an meine Worte: „Beim Layout einer Seite ist Float die Hauptseite und Position die zweite Seite!“

Das obige ist der detaillierte Inhalt vonIm CSS-Positionsattribut: der Unterschied zwischen absolut und relativ. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!