Die Unterschiede zwischen „Position: Sticky“ und „Position: Fixed“ verstehen
Für CSS-Anfänger, die die Nuancen zwischen „Position“ verstehen :sticky“ und „position:fixed“ können eine Herausforderung sein. Lassen Sie uns die wichtigsten Unterschiede aufschlüsseln:
1. Position: Fest
Bei Anwendung verankert „Position: Fest“ ein Element an einer bestimmten Position innerhalb seines Scroll-Containers oder des Ansichtsfensters. Das bedeutet, dass das Element unabhängig davon, wie weit Sie scrollen, an Ort und Stelle bleibt und von den anderen Elementen im Container nicht beeinträchtigt wird.
Beispiel:
<code class="css">.stickyElement {
position: fixed;
top: 0;
right: 0;
}</code>Hier Beispielsweise wird das „.stickyElement“ immer in der oberen rechten Ecke des Ansichtsfensters angezeigt, unabhängig davon, wie viel der Benutzer scrollt.
2. Position: Sticky
Im Gegensatz dazu verhält sich „Position: Sticky“ zunächst wie „Position: Relativ“. Wenn ein Element jedoch über einen bestimmten Versatz hinaus gescrollt wird, verwandelt es sich in „position:fixiert“ und „bleibt“ effektiv an seiner Position. Dieser Vorgang kehrt sich um, wenn das Element zurück zu seiner ursprünglichen Position gescrollt wird.
Beispiel:
<code class="css">.stickyHeader {
position: sticky;
top: 0;
width: 100%;
}</code>Mit „position: sticky“ wird der „.stickyHeader“ angezeigt als normales Element angezeigt, bis der Benutzer einen bestimmten Schwellenwert überschreitet. An diesem Punkt bleibt es am oberen Rand des Ansichtsfensters hängen und bleibt auch dann sichtbar, wenn der Rest des Seiteninhalts gescrollt wird.
Hauptunterschiede:
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen „Position: Sticky' und „Position: Fixed' in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
