Vier Hauptverwendungen des Positionsattributs im DIV-Layout

P-LayoutAttribut des PositionAttributs korrekt verwenden

Die ursprüngliche englische Bedeutung von Position bezieht sich auf Position, Position und Status. Es bedeutet auch Platzierung. Im CSS-Layout spielt Position eine sehr wichtige Rolle, und die Positionierung vieler Container wird mithilfe von Position abgeschlossen.

Das Positionsattribut hat vier optionale Werte: statisch, absolut, fest und relativ. Lassen Sie uns gemeinsam ihre unterschiedlichen Verwendungsmöglichkeiten kennenlernen. Während des Studiums sollten wir darüber nachdenken, welche davon in welcher Layout-Situation verwendet werden sollte.
Weitere Informationen zum Positionsattribut finden Sie hier.

◆p-Layout-Attributposition:statisch Keine Positionierung

Dieser Attributwert ist die Standardpositionierung aller Elemente. Unter normalen Umständen müssen wir ihn nicht speziell deklarieren, aber manchmal erbt , wir möchten nicht, dass sich die vom Element geerbten Attribute auf sich selbst auswirken. Daher können wir position: static verwenden, um die Vererbung abzubrechen, dh den Standardwert der Elementpositionierung wiederherzustellen.
Zum Beispiel: #nav{position:static;}

◆p-Layout-Attribut position:absolute　Absolute Positionierung

Die Verwendung von position:absolute kann eine sehr genaue Bewegung sein Um das Element an die gewünschte Stelle zu bringen, verschiebe ich die Navigation in die obere rechte Ecke der Seite. Wir können so schreiben: nav{position:absolute;top:0;right:0;width:200px;}
Die Ebene vor oder hinter der Navigationsebene, die die absolute Positionierung verwendet, geht davon aus, dass diese Ebene nicht existiert. Das heißt, in Z-Richtung ist es relativ unabhängig und beeinflusst andere Ebenen in Z-Richtung überhaupt nicht. position:absolute eignet sich also hervorragend, um ein Element an einer festen Position zu platzieren, funktioniert jedoch nicht, wenn Sie die Position der Ebene relativ zu benachbarten Ebenen bestimmen müssen. Sie können die relative Positionierung nur wie unten beschrieben verwenden.
Es gibt einen WinIE-Fehler, der hier erwähnt werden muss. Wenn Sie also eine relative Breite für ein absolut positioniertes Element definieren, hängt seine Breite unter IE von der Breite des übergeordneten Elements und nicht von der Breite des gesamten Elements ab Seite.

◆p-Layout-Attribut position:fixed Feste Positionierung relativ zum Fenster

Was bedeutet dieser Positionierungsattributwert? Das Element wird ähnlich wie „absolut“ positioniert, sein enthaltender Block ist jedoch das Ansichtsfenster selbst. In Bildschirmmedien wie Webbrowsern verschieben sich Elemente in der Browseransicht nicht, wenn im Dokument gescrollt wird. Beispielsweise ist ein Layout im Rahmenstil möglich. Bei Seitenmedien wie Ausdrucken erscheint ein festes Element an derselben Position auf der ersten Seite. Damit lassen sich fließende Titel oder Fußnoten generieren. Wir haben ähnliche Effekte gesehen, die meisten davon werden jedoch nicht durch CSS, sondern durch die Verwendung von JS-Skripten erreicht.
Bitte beachten Sie, dass IE6 das position:fixed-Attribut in CSS nicht unterstützt. Wirklich schade, sonst hätten wir diesen coolen Effekt ausprobieren können.

◆p-Layout-Attribut position:relative Relative Positionierung

Was genau bedeutet relative Positionierung? Wo basiert sie auf relativer Positionierung? Wir müssen ein Konzept klären: Die relative Positionierung ist die Positionierung relativ zur Standardposition des Elements. Da es relativ ist, müssen wir unterschiedliche Werte festlegen, um anzugeben, wo es positioniert werden soll. Die vier Werte oben, unten, links und rechts wirken zusammen, um die Position des Elements zu verdeutlichen. Wenn Sie möchten, dass sich die Navigationsebene um 20 Pixel nach unten und 40 Pixel nach links bewegt:
Wir können so schreiben: #nav{position:relative;top:50px;left:50px;}
Aber Sie müssen aufpassen In der folgenden Situation wird die unmittelbar auf ihn folgende Ebene woaicss nicht unter der Navigation angezeigt, sondern überlappt sich bis zu einem gewissen Grad mit der Navigation!

Das obige ist der detaillierte Inhalt vonVier Hauptverwendungen des Positionsattributs im DIV-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!