So erstellen Sie ein klebriges Element in HTML

Um das Gesamtzusehen einer Webseite zu verbessern, sollten die zusätzlichen Elemente entsprechend positioniert werden. Insbesondere die CSS “PositionDie Eigenschaft legt die Positionierung eines Elements in einem Dokument fest. Der Standort wird von rechts, links, oben und unteren Eigenschaften festgelegt. Die Standardposition der Elemente ist jedoch statisch, in der sich die Elemente mit dem normalen Fluss der Seite befinden.

In diesem Blog werden die CSS -Position Eigenschaft und die Methode zum Erstellen eines klebrigen Elements in HTML erörtert.

Was ist CSS -Positionseigenschaft?

Die CSS -Position Eigenschaft gibt die Positionierungsmethode von HTML -Elementen an, die ein absoluter, klebriger, statistischer, fester, erben, relativer oder initial sein können.

Syntax

Position: klebrig | Absolut | statisch | fest | relativ | Erben | initial

Die oben angegebene Syntax zeigt, dass die Positionseigenschaft unterschiedliche Werte hat. Sie können entsprechend zugewiesen werden.

Schauen wir uns nun die Prozedur an, um klebrige Elemente in HTML zu erstellen.

Was ist CSS -Position: klebrig?

Das HTML -Element mit einem “klebrigDie Position hat eine relative Position, bis sie einen Punkt erreicht und sich dann wie ein klebriges Element wirkt.

Lassen Sie uns das einfache Beispiel durchlaufen, um das Konzept der CSS -klebrigen Position zu verstehen.

Beispiel: So erstellen Sie ein klebriges Element in HTML?
In der HTML -Datei hinzufügen

für die Überschrift,

für den Absatz und den Klassennamen “klebrig”. Dann fügen Sie a hinzu

Tag mit verschachtelter bestellter Liste

mit einer Liste
1. .

   Notiz: Wir haben eine lange Liste aufgenommen, damit Sie beim Scrollen unserer Seite das Verhalten des klebrigen Elements beobachten können.

   Html

   Sticky Notes: Sehen Sie sich die Wirkung des klebrigen Elements an

   
   

   Position: klebrig

   
   Dies ist meine To-Do-Liste!
   

   
   

   
   
   1. Den Manager rufen
   
   
   2. Treffen mit Mitarbeitern
   
   
   3. Bericht einreichen
   
   
   4. Geh zum Arzt
   
   
   5. Einen Flug buchen
   
   
   6. Einen Spaziergang machen.
   
   
   7. Gehen Sie für Lebensmittel.
   
   
   8. Fernsehen
   
   
   9. Etwas Text.
   
   
   10. Etwas Text.
   
   
   11. Etwas Text.
   
   
   12. Etwas Text.
   
   
   13. Etwas Text.
   
   
   14. Etwas Text.
   
   
   15. Etwas Text.
   
   
   16. Etwas Text.
   
   
   17. Etwas Text.
   
   
   18. Etwas Text.
   
   
   19. Etwas Text.
   
   
   20. Etwas Text.
   
   
   21. Etwas Text.
   
   
   22. Etwas Text.
   
   
   23. Etwas Text.
   
   
   24. Etwas Text.
   
   
   25. Etwas Text.
   
   
   26. Etwas Text.
   
   
   27. Etwas Text.
   
   
   28. Etwas Text.
   
   
   29. Etwas Text.
   
   
   30. Etwas Text.
   
   
   
   

   Als nächstes werden wir dem Div namens Sticky Stil vermitteln:

   • Hier, ".klebrig„Repräsentiert die Klasse, in der die Stileigenschaften angewendet werden müssen.
   • In den lockigen Klammern werden wir die “zuweisen“Position"Eigenschaftswert als"klebrig”.
   • Der "Spitze”Wird als" eingestellt "0”.
   • Der "Hintergrundfarbe" Ist "#00154f”.
   • Etwas geben “Polsterung”Zum DIV, indem Sie ihren Wert als" festlegen "festlegen"40px”.
   • “Schriftgröße" als "30px”.
   • “Farbe”Von Schriftarten ist als" eingestellt "Weiss”.

   CSS

   .klebrig
   Position: klebrig;
   Top: 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:

   Bonuspipp

   Durch die Verwendung des “HSLA ()Methode, Sie können einen transparenten Hintergrund für das hinzugefügte klebrige Element wie folgt festlegen:

   Hintergrundfarbe: HSLA (0, 100%, 90%, 0.8);

   Ausgang

   Auf diese Weise haftet das Element an der spezifischen Position, indem Sie das CSS festlegenPosition"Eigenschaftswert als"klebrig”.

   Abschluss

   Der "klebrigDie Position in CSS und macht das Elementposition zwischen relativ und fest umschalten. Infolgedessen ist das hinzugefügte klebrige Element relativ zum Bildlauf positioniert, bis es einen bestimmten Punkt erreicht. Sie können auch die Transparenzstufe des zugesetzten klebrigen Elements anpassen, indem Sie die HSLA () -Methode verwenden. Dieser Blog hat Sie dazu gebracht, einfache und klebrige transparente Elemente zu machen.