Was ist der Unterschied zwischen Position: statisch, Position: Relativ, Position: Absolut und Position: Fix?-CSS-Tutorial-php.cn

Was ist der Unterschied zwischen Position: statisch, Position: Relativ, Position: Absolut und Position: Fix?

Die position in CSS wird verwendet, um die Positionierungsmethode eines Elements anzugeben. Es gibt vier Hauptwerte für diese Eigenschaft: static , relative , absolute und fixed . Hier ist eine detaillierte Erklärung von jedem:

Position: Statisch : Dies ist der Standardwert für alle Elemente. Wenn ein Element position: static , ist es nach dem normalen Fluss des Dokuments positioniert. Die top , right , bottom und left Eigenschaften beeinflussen keine staatlich positionierten Elemente.
Position: Relativ : Ein Element mit position: relative ist relativ zu seiner normalen Position positioniert. Sie können die Eigenschaften top , right , bottom und left verwenden, um das Element von seiner normalen Position wegzuschieben. Andere Elemente auf der Seite sind so positioniert, als ob sich das relativ positionierte Element noch in seiner ursprünglichen Position befindet.
Position: Absolut : Ein Element mit position: absolute wird aus dem normalen Dokumentfluss entfernt und für das Element im Seitenlayout kein Speicherplatz erstellt. Es ist relativ zu seinem nächsten positionierten Vorfahren (anstelle von positioniertem Relativ zum Ansichtsfenster, wie fest). Wenn kein Vorfahr eine andere Position als static hat, verwendet er den anfänglichen Block (normalerweise das Element).
Position: Behoben : Ein Element mit position: fixed ist relativ zum Ansichtsfenster positioniert, was bedeutet, dass es immer am selben Ort bleibt, selbst wenn die Seite gescrollt ist. Die top , right , bottom und left Eigenschaften werden verwendet, um die Position zu bestimmen.

Jede dieser Positionierungsmethoden wirkt sich darauf aus, wie sich ein Element im Dokumentfluss verhält und wie es mit anderen Elementen und dem Ansichtsfenster interagiert.

Wie ändert sich die Stapelreihenfolge der Elemente mit verschiedenen CSS -Positionseigenschaften?

Die Stapelreihenfolge (oder Z-Ordnung) von Elementen wird durch die CSS- z-index Eigenschaft in Kombination mit der position bestimmt. Hier erfahren Sie, wie sich die verschiedenen Positionierungsmethoden auf Stapelreihenfolge auswirken:

Statische Positionierung : Elemente mit position: static beteiligen sich nicht am Z-Reihenfolge, wie von z-index definiert. Sie werden in der Reihenfolge gerendert, die sie in der Dokumentquelle von unten nach oben erscheinen.
Relative, absolute und feste Positionierung : Elemente mit position: relative , position: absolute oder position: fixed kann ihre Z-Ordnung von der z-index Eigenschaft gesteuert werden. Elemente mit einem höheren z-index Wert werden über Elemente mit einem niedrigeren z-index -Wert angezeigt.
Stapelkontext : Wenn ein Element mit einer anderen Positionierung als static (und z-index als auto ) einen neuen Stapelkontext festlegt, werden alle ihre Kinderelemente in diesem Kontext gerendert. Dies bedeutet, dass die z-index -Werte von Elementen in verschiedenen Stapelkontexten nur in ihrem eigenen Kontext verglichen werden.
Standardstapelreihenfolge : In einem Stapelkontext sind Elemente in dieser Reihenfolge gestapelt (von unten nach oben):
1. Der Hintergrund und die Grenzen des Elements, das den Stapelkontext bildet.
2. Positionierte Elemente mit negativen z-index Werten (niedrigere Zahlen werden zuerst gestapelt).
3. Nichtpositionierte Elemente (Elemente mit position: static ).
4. Positionierte Elemente mit z-index: auto oder z-index: 0 .
5. Positionierte Elemente mit positiven z-index -Werten (höhere Zahlen sind zuletzt gestapelt).

Das Verständnis dieser Regeln ist entscheidend für die Kontrolle der visuellen Schicht von Elementen auf einer Webseite.

Können Sie erklären, wie Sie Position verwenden: Relativ und Position: absolut zusammen, um ein Layout zu erstellen?

Verwenden von position: relative und position: absolute zusammen ist eine gemeinsame Technik in CSS zum Erstellen komplexer Layouts. So funktioniert es:

Elterncontainer mit position: relative : Der übergeordnete Container muss position: relative . Diese Einstellung stellt sicher, dass alle untergeordneten Elemente mit position: absolute eher zu diesem Container als im gesamten Dokument positioniert werden.
```
 <code class="css">.parent-container { position: relative; }</code>
```
Nach dem Login kopieren
Unterkindliches Element mit position: absolute : Das untergeordnete Element, das Sie genau innerhalb des übergeordneten Containers positionieren möchten, sollte position: absolute . Sie können dann die Eigenschaften top , right , bottom und left verwenden, um seine Position relativ zum Elternteil anzugeben.
```
 <code class="css">.child-element { position: absolute; top: 10px; left: 20px; }</code>
```
Nach dem Login kopieren
Dadurch wird die .child-element 10 Pixel von oben und 20 Pixel von links vom .parent-container positioniert.

Hier ist ein Beispiel dafür, wie dies in HTML und CSS aussehen könnte:

 <code class="html"><div class="parent-container"> <div class="child-element">This is the child element</div> </div></code>

Nach dem Login kopieren

 <code class="css">.parent-container { position: relative; width: 300px; height: 200px; border: 1px solid black; } .child-element { position: absolute; top: 10px; left: 20px; background-color: red; }</code>

Nach dem Login kopieren

In diesem Beispiel wird das .child-element 10 Pixel von oben und 20 Pixel von links vom .parent-container mit einer Größe von 300 x 200 Pixel mit schwarzem Rand positioniert.

Welche CSS -Position sollte ich verwenden, um ein Element an einem festen Ort auf dem Bildschirm zu halten?

Um ein Element an einem festgelegten Ort auf dem Bildschirm zu halten, sollten Sie die position: fixed Eigenschaft verwenden. So funktioniert es:

Verwendung : Wenn Sie position: fixed , wird es aus dem normalen Dokumentfluss entfernt und im Seitenlayout kein Speicherplatz dafür erstellt. Das Element ist relativ zum Ansichtsfenster positioniert, was bedeutet, dass es sich nicht bewegt, wenn die Seite gescrollt ist.
Eigenschaften : Sie können die top , right , bottom und left Eigenschaften verwenden, um die genaue Position des festen Elements im Ansichtsfenster anzugeben.

Hier ist ein Beispiel:

 <code class="css">.fixed-element { position: fixed; top: 20px; right: 30px; background-color: blue; }</code>

Nach dem Login kopieren

In diesem Beispiel wird das .fixed-element immer 20 Pixel von oben und 30 Pixel von rechts vom Ansichtsfenster positioniert und bleiben an Ort und Stelle, auch wenn der Benutzer die Seite scrollt.

Verwenden Sie position: fixed ist ideal für Elemente wie Navigationsstangen, Header oder Fußzeilen, die Sie zu jeder Zeit sichtbar und an derselben Stelle auf dem Bildschirm bleiben möchten.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Position: statisch, Position: Relativ, Position: Absolut und Position: Fix?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!