So legen Sie die Sticky-Positionierung in CSS fest

So legen Sie die Sticky-Positionierung in CSS fest: Schreiben Sie einfach [position:sticky] direkt in den CSS-Selektor. Sticky Positioning kann als eine Mischung aus relativer und fester Positionierung betrachtet werden, bei der ein Element relativ positioniert wird, bis es einen bestimmten Schwellenwert überschreitet, und dann fixiert wird.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version. Diese Methode ist für alle Computermarken geeignet.

(Teilen von Lernvideos: CSS-Video-Tutorial)

So legen Sie die Sticky-Positionierung in CSS fest:

Schreiben Sie einfach position:sticky direkt in den CSS-Selektor.

Sticky Positioning kann als eine Mischung aus relativer Positionierung und fester Positionierung betrachtet werden. Elemente werden relativ positioniert, bis sie einen bestimmten Schwellenwert überschreiten, und dann fest positioniert. Dieser spezifische Schwellenwert bezieht sich auf einen von oben, rechts, unten oder links. Mit anderen Worten: Die Sticky-Positionierung kann nur wirksam werden, indem einer der vier Schwellenwerte oben, rechts, unten oder links angegeben wird. Ansonsten entspricht das Verhalten der relativen Positionierung.

Bei der Sticky-Positionierung gibt es ein Konzept der „Flow-Box“, das sich auf die Größe des scrollbaren Elements bezieht, das dem Sticky-Positionierungselement am nächsten liegt (das Element, dessen Überlaufattributwert nicht sichtbar ist, wenn kein scrollbares Element vorhanden ist). es bedeutet Browser-Fensterbox.

Schreiben Sie einfach position:sticky direkt in den CSS-Selektor. Die Hauptpunkte sollen die folgenden Punkte hervorheben:

1 Die Position des Sticky-Elements wird nur relativ zum ersten scrollenden übergeordneten Blockelement positioniert. Scrollmechanismus (über Elemente, deren Überlauf auf Überlauf/Scrollen/Auto/Overlay eingestellt ist) und nicht über das übergeordnete Blockelement. Codepen-Beispiel

2. Es funktioniert nur, wenn die entsprechende Richtung (oben/rechts/unten/links) eingestellt ist, und kann übereinander gelegt werden, und es können vier Richtungen gleichzeitig eingestellt werden.

3. Auch wenn position: sticky festgelegt ist, kann es nur im Inhaltsbereich des übergeordneten Blockelements angezeigt werden. Es darf diesen Bereich nicht überschreiten, es sei denn, Sie legen einen negativen Wert fest.

4. Position: Sticky löst BFC nicht aus. Einfach ausgedrückt, werden Float-Elemente bei der Berechnung der Höhe nicht berechnet.

5. Wenn Position auf: Sticky eingestellt ist, erfolgt die interne Positionierung relativ zu diesem Element (Codepen-Beispiel)

6 Obwohl sich Position: Sticky wie relativ oder fest verhält, können sie auch über die Z-Index-Ebene festgelegt werden. Wenn die Geschwisterknoten hinter diesem Element dieses Element abdecken, kann die Ebene über den Z-Index angepasst werden. (Codepen-Beispiel)

7. Wenn das übergeordnete Element eines Sticky-Layout-Elements im sichtbaren Bereich liegt, ist das Layout des Elements relativ, andernfalls ist es festgelegt.

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie die Sticky-Positionierung in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!