Deze blog bespreekt de eigenschap CSS position en de methode om een plakkerig element in HTML te maken.
Wat is CSS-positie-eigenschap?
De eigenschap CSS position specificeert de positioneringsmethode van HTML-elementen, die een absoluut, plakkerig, statistisch, vast, overerven, relatief of initiaal kan zijn.
Syntaxis
positie : kleverig | absoluut | statisch | gemaakt | familielid | je erft | voorletter
De bovenstaande syntaxis laat zien dat de eigenschap position verschillende waarden heeft. Ze kunnen dienovereenkomstig worden toegewezen.
Laten we nu eens kijken naar de procedure om plakkerige elementen in HTML te maken.
Wat is CSS-positie: plakkerig?
Het HTML-element met een “ kleverig ” position heeft een relatieve positie totdat het een punt bereikt en gedraagt zich dan als een plakkerig element.
Laten we het eenvoudige voorbeeld doornemen om het concept van CSS-plakpositie te begrijpen.
Voorbeeld: Hoe maak je een Sticky Element in HTML?
Voeg in het HTML-bestand
toe voor de kop,
voor de alinea en
-tag toe waarbij de geordende lijst
- is genest met een lijst
- .
Opmerking : We hebben een lange lijst gemaakt, zodat u bij het scrollen op onze pagina het gedrag van het plakkerige element kunt observeren.
HTML
< h2 > Sticky Notes: bekijk het effect van het Sticky-element < / h2 >
< p > positie: plakkerig < / p >
< div klas = 'kleverig' > Dit is mijn takenlijst! < / div >
< p >
< ol >
< Dat > Oproepbeheerder < / Dat >
< Dat > Ontmoeting met medewerkers < / Dat >
< Dat > Rapport indienen < / Dat >
< Dat > Ga naar de dokter < / Dat >
< Dat > Een vlucht boeken < / Dat >
< Dat > Ga wandelen. < / Dat >
< Dat > Ga voor kruidenierswinkel. < / Dat >
< Dat > Tv kijken < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< Dat > Wat tekst. < / Dat >
< / ol >
< / p >Vervolgens zullen we stijl geven aan de div met de naam sticky:
- Hier, ' .kleverig ” vertegenwoordigt de klasse waarin de stijleigenschappen moeten worden toegepast.
- Binnen de accolades zullen we de ' positie ” eigendomswaarde als “ kleverig ”.
- De ' bovenkant ” is ingesteld als “ 0 ”.
- De ' Achtergrond kleur ' is ' #00154f ”.
- Geef wat ' opvulling ' toe aan de div door de waarde in te stellen als ' 40px ”.
- “ lettertypegrootte ' net zo ' 30px ”.
- “ kleur ' van lettertypen is ingesteld als ' wit ”.
CSS
.kleverig {
positie : kleverig ;
bovenkant : 0 ;
Achtergrond kleur : #00154f ;
opvulling : 40px ;
lettertypegrootte : 30px ;
kleur : wit ;
}Sla het HTML-bestand op en open het in de browser om de uitvoer te zien:
Bonustip
Door gebruik te maken van de “ hla() ” methode, kunt u als volgt een transparante achtergrond instellen voor het toegevoegde kleverige element:
achtergrond - kleur : hsla ( 0 , 100 %, 90 %, 0,8 ) ;Uitgang
Dit is hoe het element op de specifieke positie blijft door de CSS in te stellen ' positie ” eigendomswaarde als “ kleverig ”.
Conclusie
De ' kleverig '-positie in CSS, schakelt de elementpositie tussen relatief en vast. Als resultaat wordt het toegevoegde plakkerige element gepositioneerd ten opzichte van de scroll totdat het een bepaald punt bereikt waarop het zich gedraagt als een plakkerig element. U kunt ook het transparantieniveau van het toegevoegde plakkerige element aanpassen door de methode hsla() te gebruiken. Deze blog heeft je begeleid bij het maken van eenvoudige en plakkerige transparante elementen.