CSS-Position legt die Positionierungsmethode von Elementen fest

1. Einführung

Das Positionsattribut von CSS legt die Positionierungsmethode des Elements fest und definiert Positionierungsregeln für das zu positionierende Element. Diese Eigenschaft ist nützlich für die Skripterstellung von Animationseffekten.

1. Ein positioniertes Element ist ein Element, dessen berechnetes Positionsattribut unterteilt ist in: relativ (relativ), absolut (absolut), fest (fixed) oder sticky (klebrig).

2. Die Attribute oben, rechts, unten und links geben die Position des positionierten Elements an.

3. Der Z-Index legt die Stapelreihenfolge der Positionierungselemente fest. Der Wert kann eine positive oder negative Zahl sein Je kleiner der Wert, desto weiter vom Benutzer entfernt.

Wie in der Abbildung gezeigt: Wenn der Wert von z-index -1 ist, liegt die Position des Bildes unter dem Text und weit weg vom Benutzer. Wenn der Wert von z -index ist auf eine positive Zahl gesetzt. Die Position des Bildes wird über dem Text angezeigt und deckt einen Teil des Textes ab!

Und wenn der Wert von Z-Index auf eine positive Zahl eingestellt ist, wird die Position des Bildes über dem Text angezeigt und deckt einen Teil des Textes ab ! left:20px; bedeutet, dass der Abstand zwischen dem Bild und dem linken Rand 20px beträgt; top:20px bedeutet, dass der Abstand zwischen dem Bild und der Oberseite 20px beträgt

2. Holen Sie sich den Wert

statisch

Dieses Schlüsselwort bewirkt, dass dieses Element normales Verhalten verwendet Das heißt, das Element befindet sich im Dokumentfluss. Seine aktuelle Layoutposition sowie die Eigenschaften „oben“, „rechts“, „unten“, „links“ und „Z-Index“ sind ungültig.

relativ

Verwenden Sie dieses Schlüsselwort, um ein Element so anzuordnen, als ob es nicht positioniert wäre. Das heißt, es passt sich der Position des Elements an, ohne das Layout zu ändern (wodurch an der Stelle, an der sich das Element ursprünglich befand, ein Leerraum verbleibt). position:relative ist ungültig für table-*-group, table-row, table-column, table-cell, table-caption.

absolut

reserviert keinen Platz für das Element. Das Element wird durch Angabe seines Versatzes von seinem nächsten nicht statisch positionierten Vorgänger positioniert. um sicher zu sein. Für absolut positionierte Elemente können Ränder festgelegt werden und sie werden nicht mit anderen Rändern zusammengeführt.

fixed

reserviert keinen Platz für das Element. Gibt den Platz des Elements an, indem eine Position relativ zum Bildschirmansichtsfenster angegeben wird. Die Position des Elements ändert sich nicht, wenn der Bildschirm gescrollt wird. Das Element erscheint beim Drucken an einer festen Position auf jeder Seite. Das feste Attribut erstellt normalerweise eine neue Stack-Umgebung.

Die obige ausführliche Erläuterung der Positionierungsmethode zum Festlegen von Elementen in der CSS-Position ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie PHP-Chinesisch unterstützen Webseite.

Weitere Artikel zum Festlegen der Positionierungsmethode von Elementen in CSS finden Sie auf der chinesischen PHP-Website!