CSSPosition-Positionierung

Das Positionsattribut definiert den Positionierungsmechanismus, der zum Festlegen des Layouts von Elementen verwendet wird. Jedes Element kann positioniert werden, aber durch das Absolut- oder Fixieren eines Elements wird ein Block auf Blockebene erzeugt, unabhängig vom Typ des Elements. Die relative Positionierung eines Elements wird von seiner Standardposition im normalen Dokumentfluss versetzt.

Im Allgemeinen verfügt das Positionselement über fünf Attribute, darunter:

1.absolut (erzeugt ein absolut positioniertes Element, das relativ zum ersten übergeordneten Element positioniert ist, mit Ausnahme der statischen Positionierung. Die Position des Elements wird durch oben, links, rechts und unten festgelegt.)

　2.fixed (erzeugt ein absolut positioniertes Element, das sich von „absolut“ unterscheidet. „Fixed“ wird relativ zum Browserfenster positioniert. Die Positionseinstellungsmethode des Elements ist die gleiche wie „absolut“.)

3.relative (Erzeugt ein relativ positioniertes Element, das relativ zum Browserfenster positioniert ist. Daher fügt „left:20px;“ 20 Pixel zur linken Position des Elements hinzu.)

　4.static (der Standardwert des Positionselements, keine Positionierung, daher wird dieses Element im normalen Dokumentfluss angezeigt)

　5.inherit (Legen Sie den Wert des Positionsattributs fest, der vom übergeordneten Element geerbt werden soll.)

Nachfolgend listen wir einige Beispielcodes für verschiedene Attribute auf:

　1.absolutes Attribut

　
　　
　　
　　　h2.pos_abs{
　　position:absolute;
　　　　left :100px;

　　　
　　　

Dies ist der Titel mit absoluter Positionierung

　　　

Mit absoluter Positionierung können Elemente beliebig auf der Seite platziert werden Standort. Der Titel unten ist 100 Pixel vom linken Rand der Seite und 150 Pixel vom oberen Rand der Seite entfernt positioniert.

　　

　

　2.relative attribute()　

& lt;

　　　　　}

　　　　h2.pos_right{

　　　　position: relative; ;/style>

　　

;/h2>
　　　　

Dieser Titel wird relativ zu seiner normalen Position nach rechts verschoben

　　　

Durch die relative Positionierung wird das Element entsprechend positioniert in seine ursprüngliche Position. Machen Sie eine Bewegung.

　　　　

Style „left:-20px“ subtrahiert 20 Pixel von der ursprünglichen linken Position des Elements.

　　　　

Style „left:20px“ fügt 20 Pixel zur ursprünglichen linken Position des Elements hinzu.

　　

　

　3.festes Attribut
　

　
　　
　　
　　　p.one{
　　　　　position:fixed;
　　　links:5px;
　　　　right:5px;

　　　　}

　　　　　　

　　　 　　　

Einige Texte.

　　　

Mehr Text.

　　
　　

Wenn beim Positionieren von Elementen ein Konflikt zwischen zwei Elementen besteht, können Sie das Z-Index-Attribut verwenden, um die Priorität für das Element festzulegen. Der Standardwert lautet 0. Angenommen, es gibt zwei Elemente A und B. Das Z-Index-Attribut von A ist standardmäßig auf 0 und das Z-Index-Attribut von B auf -1 gesetzt. Dann ist die Priorität des B-Elements niedriger als die des Ein Element.

Was ist also absolute Positionierung und was ist relative Positionierung?

　1. Absolute Positionierung: Die Elementposition wird entsprechend der oberen linken Ecke der Browserseite positioniert, und das Element wird vom Dokumentfluss getrennt und nimmt keinen Platz ein. Elemente im normalen Dokumentenfluss werden so angeordnet, als ob absolut positionierte Elemente nicht vorhanden wären. Kurz gesagt, Positionierungselemente sind vom Dokumentenfluss und dem Floating-Modell getrennt und existieren unabhängig von anderen Objekten ohne Platzhalter.

2. Relative Positionierung: Wenn ein Element relativ positioniert ist, erscheint es zuerst an der Position, an der es erscheint, und dann wird das Element „relativ zu“ seinem ursprünglichen Startpunkt durch die vertikale oder horizontale Position verschoben. Durch die relative Positionierung wird das Element nicht aus dem Dokumentfluss entfernt. Das festgelegte Element wird relativ zu seiner ursprünglichen Positionierung weiter positioniert und seine ursprünglichen Platzhalterinformationen sind weiterhin vorhanden.