Questo blog discuterà la proprietà position CSS e il metodo per creare un elemento sticky in HTML.
Che cos'è la proprietà di posizione CSS?
La proprietà CSS position specifica il metodo di posizionamento degli elementi HTML, che può essere assoluto, permanente, statistico, fisso, ereditario, relativo o iniziale.
Sintassi
posizione : appiccicoso | assoluto | statico | fisso | parente | erediti | iniziale
La sintassi data sopra mostra che la proprietà position ha valori diversi. Possono essere assegnati di conseguenza.
Ora, diamo un'occhiata alla procedura per creare elementi appiccicosi in HTML.
Qual è la posizione CSS: appiccicosa?
L'elemento HTML con un ' appiccicoso ” position ha una posizione relativa finché non raggiunge un punto e poi si comporta come un elemento appiccicoso.
Esaminiamo il semplice esempio per comprendere il concetto di posizione adesiva CSS.
Esempio: come creare un elemento appiccicoso in HTML?
Nel file HTML, aggiungi
per l'intestazione,
per il paragrafo e
con un elenco ordinato nidificato
- con un elenco
- .
Nota : Abbiamo preso un lungo elenco in modo che scorrendo la nostra pagina, puoi osservare il comportamento dell'elemento appiccicoso.
HTML
< h2 > Note adesive: vedi l'effetto dell'elemento appiccicoso < / h2 >
< p > posizione: appiccicoso < / p >
< div classe = 'appiccicoso' > Questa è la mia lista delle cose da fare! < / div >
< p >
< ol >
< Quello > Responsabile chiamate < / Quello >
< Quello > Incontro con i dipendenti < / Quello >
< Quello > Invia rapporto < / Quello >
< Quello > Vai dal dottore < / Quello >
< Quello > Prenotare un volo < / Quello >
< Quello > Fare una passeggiata. < / Quello >
< Quello > Vai a fare la spesa. < / Quello >
< Quello > Guardare la tv < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< Quello > Del testo. < / Quello >
< / ol >
< / p >Successivamente, forniremo lo stile al div denominato sticky:
- Qui, ' .appiccicoso ” rappresenta la classe in cui devono essere applicate le proprietà di stile.
- All'interno delle parentesi graffe, 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 “ 40 pixel ”.
- “ dimensione del font ' come ' 30px ”.
- “ colore ” dei caratteri è impostato come “ bianca ”.
CSS
.appiccicoso {
posizione : appiccicoso ;
superiore : 0 ;
colore di sfondo : #00154f ;
imbottitura : 40 pixel ;
dimensione del font : 30px ;
colore : bianca ;
}Salva il file HTML e aprilo nel browser per vedere l'output:
Suggerimento bonus
Utilizzando il “ hsla() ', puoi impostare uno sfondo trasparente per l'elemento adesivo aggiunto come segue:
sfondo - colore : hsla ( 0 , 100 %, 90 %, 0.8 ) ;Produzione
Questo è il modo in cui l'elemento si attacca alla posizione specifica impostando il CSS ' posizione ” valore della proprietà come “ appiccicoso ”.
Conclusione
Il ' appiccicoso ” posizione in CSS, fa in modo che la posizione dell'elemento passi da relativa a fissa. Di conseguenza, l'elemento appiccicoso aggiunto viene posizionato rispetto alla pergamena finché non raggiunge un certo punto in cui si comporta come un appiccicoso. Puoi anche regolare il livello di trasparenza dell'elemento appiccicoso aggiunto utilizzando il metodo hsla(). Questo blog ti ha guidato nella creazione di elementi trasparenti semplici e appiccicosi.