Come creare un elemento appiccicoso in HTML

Per migliorare l'aspetto generale di una pagina web, gli elementi aggiunti dovrebbero essere posizionati di conseguenza. In particolare, il CSS "posizione"La proprietà imposta il posizionamento di un elemento in un documento. La posizione è impostata da proprietà destra, sinistra, superiore e inferiore. Tuttavia, la posizione predefinita degli elementi è statica, in cui gli elementi risiedono con il flusso normale della pagina.

Questo blog discuterà la proprietà della posizione CSS e il metodo per creare un elemento appiccicoso in HTML.

Cos'è la proprietà di posizione CSS?

La proprietà della posizione CSS specifica il metodo di posizionamento degli elementi HTML, che può essere assolutamente, appiccicoso, statistico, fisso, ereditario, relativo o iniziale.

Sintassi

Posizione: appiccicoso | assoluto | statico | fisso | parente | eredità | iniziale

La sintassi sopra indicata mostra che la proprietà di posizione ha valori diversi. Possono essere assegnati di conseguenza.

Ora, controlliamo la procedura per creare elementi appiccicosi in HTML.

Qual è la posizione CSS: appiccicoso?

L'elemento html con "appiccicoso"La posizione ha una posizione relativa fino a quando non raggiunge un punto e poi agisce come un elemento appiccicoso.

Passiamo attraverso il semplice esempio per capire il concetto di posizione appiccicosa CSS.

Esempio: come creare un elemento appiccicoso in HTML?
Nel file HTML, aggiungi

per l'intestazione,

per il paragrafo e avere il nome di classe "appiccicoso". Quindi, aggiungi un file

tag che ha nidificato elenco ordinato

con un elenco
1. .

   Nota: Abbiamo preso una lunga lista in modo che dopo aver scorrere la nostra pagina, puoi osservare il comportamento dell'elemento appiccicoso.

   Html

   Note appiccicose: vedi l'effetto dell'elemento appiccicoso

   
   

   Posizione: appiccicoso

   
   Questa è la mia lista di cose da fare!
   

   
   

   
   
   1. Call Manager
   
   
   2. Incontro con i dipendenti
   
   
   3. Invia relazione
   
   
   4. Vai dal dottore
   
   
   5. Prenotare un volo
   
   
   6. Fare una passeggiata.
   
   
   7. Scegli la drogheria.
   
   
   8. Guardare la tv
   
   
   9. Un po 'di testo.
   
   
   10. Un po 'di testo.
   
   
   11. Un po 'di testo.
   
   
   12. Un po 'di testo.
   
   
   13. Un po 'di testo.
   
   
   14. Un po 'di testo.
   
   
   15. Un po 'di testo.
   
   
   16. Un po 'di testo.
   
   
   17. Un po 'di testo.
   
   
   18. Un po 'di testo.
   
   
   19. Un po 'di testo.
   
   
   20. Un po 'di testo.
   
   
   21. Un po 'di testo.
   
   
   22. Un po 'di testo.
   
   
   23. Un po 'di testo.
   
   
   24. Un po 'di testo.
   
   
   25. Un po 'di testo.
   
   
   26. Un po 'di testo.
   
   
   27. Un po 'di testo.
   
   
   28. Un po 'di testo.
   
   
   29. Un po 'di testo.
   
   
   30. Un po 'di testo.
   
   
   
   

   Successivamente, forniremo stile al Div chiamato Sticky:

   • Qui, ".appiccicoso"Rappresenta la classe in cui è necessario applicare le proprietà di stile.
   • All'interno delle parentesi ricci, assegneremo il "posizione"Valore della proprietà come"appiccicoso".
   • IL "superiore"È impostato come"0".
   • IL "colore di sfondo" È "#00154f".
   • Dammi un po "imbottitura"Al div impostando il suo valore come"40px".
   • "dimensione del font" COME "30px".
   • "colore"Di caratteri è impostato come"bianco".

   CSS

   .appiccicoso
   Posizione: appiccicoso;
   Top: 0;
   Background-color: #00154F;
   imbottitura: 40px;
   Font-size: 30px;
   colore bianco;
   

   Salva il file HTML e aprilo nel browser per vedere l'output:

   Suggerimento bonus

   Utilizzando il "HSLA ()"Metodo, è possibile impostare uno sfondo trasparente per l'elemento appiccicoso aggiunto come segue:

   Background-color: HSLA (0, 100%, 90%, 0.8);

   Produzione

   Ecco come l'elemento si attacca alla posizione specifica impostando il CSS "posizione"Valore della proprietà come"appiccicoso".

   Conclusione

   IL "appiccicoso"Posizione in CSS, rende la posizione dell'elemento in attivazione tra relativa e fissa. Di conseguenza, l'elemento appiccicoso aggiunto è posizionato rispetto allo scorrimento fino a raggiungere un certo punto quando si comporta come un appiccicoso. È inoltre possibile regolare il livello di trasparenza dell'elemento appiccicoso aggiunto utilizzando il metodo HSLA (). Questo blog ti ha guidato per rendere elementi trasparenti semplici e appiccicosi.