In diesem Blog werden die CSS-Positionseigenschaft und die Methode zum Erstellen eines Sticky-Elements in HTML erläutert.
Was ist die CSS-Positionseigenschaft?
Die CSS-Positionseigenschaft gibt die Positionierungsmethode von HTML-Elementen an, die absolut, fest, statistisch, fest, vererbt, relativ oder initial sein kann.
Syntax
Position : klebrig | absolut | statisch | Fest | relativ | du erbst | Initial
Die oben angegebene Syntax zeigt, dass die Positionseigenschaft unterschiedliche Werte hat. Sie können entsprechend zugeordnet werden.
Schauen wir uns nun das Verfahren zum Erstellen von Sticky-Elementen in HTML an.
Was ist CSS position: sticky?
Das HTML-Element mit einem „ klebrig ”-Position hat eine relative Position, bis sie einen Punkt erreicht, und verhält sich dann wie ein klebriges Element.
Lassen Sie uns das einfache Beispiel durchgehen, um das Konzept der CSS-Sticky-Position zu verstehen.
Beispiel: Wie erstelle ich ein Sticky-Element in HTML?
Fügen Sie in der HTML-Datei
für die Überschrift,
für den Absatz und
-Tag mit einer verschachtelten geordneten Liste
- mit einer Liste
- hinzu.
Notiz : Wir haben eine lange Liste erstellt, damit Sie beim Scrollen unserer Seite das Verhalten des Sticky-Elements beobachten können.
HTML
< h2 > Sticky Notes: Sehen Sie sich den Effekt des Sticky-Elements an < / h2 >
< p > Position: klebrig < / p >
< div Klasse = 'klebrig' > Das ist meine To-Do-Liste! < / div >
< p >
< ol >
< das > Den Manager rufen < / das >
< das > Treffen mit Mitarbeitern < / das >
< das > Bericht einreichen < / das >
< das > Geh zum Arzt < / das >
< das > Einen Flug buchen < / das >
< das > Spazieren gehen. < / das >
< das > Gehen Sie einkaufen. < / das >
< das > Schaue fern < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< das > Etwas Text. < / das >
< / ol >
< / p >Als nächstes werden wir dem div namens sticky Stil verleihen:
- Hier, ' .klebrig ” stellt die Klasse dar, in der die Stileigenschaften angewendet werden müssen.
- Innerhalb der geschweiften Klammern weisen wir das „ Position „Immobilienwert als“ klebrig “.
- Das ' oben “ ist eingestellt als „ 0 “.
- Das ' Hintergrundfarbe ' ist ' #00154f “.
- Gib etwas „ Polsterung “ in das div, indem Sie seinen Wert als „ 40px “.
- „ Schriftgröße ' wie ' 30px “.
- „ Farbe ” von Schriftarten ist festgelegt als ” Weiß “.
CSS
.klebrig {
Position : klebrig ;
oben : 0 ;
Hintergrundfarbe : #00154f ;
Polsterung : 40px ;
Schriftgröße : 30px ;
Farbe : Weiß ;
}Speichern Sie die HTML-Datei und öffnen Sie sie im Browser, um die Ausgabe anzuzeigen:
Bonus-Tipp
Durch die Nutzung des „ hsla() ”-Methode können Sie wie folgt einen transparenten Hintergrund für das hinzugefügte Sticky-Element festlegen:
Hintergrund - Farbe : hsla ( 0 , 100 %, 90 %, 0,8 ) ;Ausgabe
So bleibt das Element an der bestimmten Position hängen, indem das CSS „ Position „Immobilienwert als“ klebrig “.
Fazit
Das ' klebrig ” Position in CSS bewirkt, dass die Elementposition zwischen relativ und fest umschaltet. Als Ergebnis wird das hinzugefügte Sticky-Element relativ zur Schriftrolle positioniert, bis es einen bestimmten Punkt erreicht, an dem es sich wie ein Sticky verhält. Sie können auch den Transparenzgrad des hinzugefügten Sticky-Elements anpassen, indem Sie die Methode hsla() verwenden. Dieser Blog führte Sie zum Erstellen einfacher und klebriger transparenter Elemente.