Plasseringen av HTML-elementene spiller en viktig rolle i organiseringen av nettsidekomponentene. Mer spesifikt kan plasseringen av elementene justeres ved å bruke CSS ' posisjon ' eiendom. Denne egenskapen kan assosieres med forskyvningsegenskaper, for eksempel topp-, venstre-, høyre- og bunnegenskaper, og gir spesifikke verdier for å justere elementet på siden. Imidlertid ' absolutt ” posisjonerte elementer kan justeres i forhold til nærmeste posisjonerte element.
Dette innlegget vil forklare CSS absolutte posisjonering.
CSS 'posisjon' egenskap
« posisjon ”-egenskapen i CSS kan brukes til å justere elementets posisjon. Ulike verdier for posisjonsegenskapen er faste, absolutte, relative, statiske og klebrige. Disse verdiene er satt med forskyvningsegenskapene, for eksempel topp, høyre, venstre og bunn, for å justere elementets posisjon.
Hvordan bruke CSS Absolute Positioning?
Elementets absolutte posisjonering kan brukes ved å bruke CSS ' posisjon ' eiendom med verdien ' absolutt '. Elementet med den absolutte posisjonen justeres tilsvarende dets nærmeste posisjonerte overordnede element. Men hvis stamfaren ikke er plassert, vil den justere seg i forhold til hoveddelen av dokumentet.
Eksempel
La oss forstå konseptet med et praktisk eksempel.
Trinn 1: Lag en HTML-fil
I HTML-filen, i body-elementet, legg til en div med klassenavnet ' hoved- '. Deretter, inne i den opprettede div, legger du til en HTML -tag knyttet til følgende attributter:
-
- ' src ' gir en lenke til bildet.
- ' klasse ” brukes i CSS for å style elementene.
- ' alt ”-attributt spesifiserer teksten som vises i stedet for bildet hvis bildet ikke kan lastes inn på siden.
- ' alt ”-attributt spesifiserer teksten som vises på siden i stedet for bildet hvis bildet ikke kan lastes inn på siden.
Deretter legger du til en annen div som inneholder overskriften og avsnittets h1- og p-elementer:
< div klasse = 'hoved' >< div klasse = 'innhold' >
< img src = 'images/linuxlogo.png' klasse = 'hjem' alt = 'linux logo' bredde = '80px' >
< h1 > CSS absolutte posisjonering h1 >
< s > Hei Linuxhint-teamet ! s >
div >
div >
I CSS brukes flere stylingegenskaper for å dekorere HTML-elementene.
Trinn 2: Stil 'alle' elementer
* {font-familie: Verdana, Genève, Tahoma, sans-serif;
}
HTML-elementene er stilt ved hjelp av ' font-familie ' eiendom med verdien ' Verdana, Genève, Tahoma, sans-serif '. Denne listen over verdier sikrer at hvis nettleseren ikke støtter den første stilen, vil den andre bli brukt.
Trinn 3: Stil 'hjem' div
.hjem {posisjon: absolutt;
topp: 50px;
venstre: 45px;
}
Nedenfor er egenskapene brukt på ' hjem ' div:
-
- ' posisjon '-egenskapen angir elementets posisjon. Her er det lagt til ' absolutt ” vil plassere elementet i forhold til hoveddelen av HTML-en.
- ' topp ”-egenskapen brukes for vertikal justering av elementet.
- ' venstre ”-egenskapen brukes for den horisontale justeringen av elementet.
Trinn 4: Stil 'innhold' div
.innhold {bakgrunnsfarge: kadettblå;
bredde: 300px;
høyde: 250px;
polstring-venstre: 40px;
marg-venstre: 80px;
}
Nedenfor er CSS-egenskapene som brukes på ' innhold ' div:
-
- ' bakgrunnsfarge egenskapen angir elementets bakgrunnsfarge.
- ' bredde egenskapen angir elementets bredde.
- ' høyde '-egenskapen angir elementets høyde.
- ' polstring-venstre egenskapen er satt til å legge til plass på venstre side av elementets innhold.
- ' marg-venstre egenskapen spesifiserer plassen på venstre side av elementet.
På dette tidspunktet vil nettsiden vår se slik ut:
Det kan sees fra resultatet ovenfor at bildet av div-hjemmet er plassert på 50px fra toppen og 45px fra venstre side av dokumentets hoveddel. Dessuten er posisjonen til hjemme-div satt i forhold til hoveddelen av HTML-en.
Hvordan justere posisjonen til elementet 'relativt' til det posisjonerte overordnede elementet?
Denne delen vil veilede deg om hvordan du justerer elementets posisjon i forhold til nærmeste posisjonsoverordnede element.
Sett 'posisjon' Egenskapen til 'innhold' div
stilling: pårørende;
For å justere posisjonen til elementet i forhold til det overordnede elementet, sett ' posisjon ' egenskapen til det overordnede elementet til ' slektning 'verdi.
Sett 'posisjon'-egenskapen til 'img'-elementet
.hjem {posisjon: absolutt;
topp: 100px;
venstre: 220px;
}
Her:
-
- ' posisjon ' egenskap med verdien satt som ' absolutt ” vil bli posisjonert i forhold til det overordnede elementet (det vil si at innhold div-posisjon er satt med verdien relativ).
- ' topp ”-egenskapen brukes for å sette elementposisjonen fra toppen.
- ' venstre ”-egenskapen brukes for å sette elementposisjonen fra venstre.
Produksjon
Det kan sees fra resultatet at bildet har blitt plassert i forhold til overordnet div, og det ser passende ut.
Konklusjon
CSS ' posisjon ”-egenskapen brukes til å angi plasseringen av HTML-elementene. Denne egenskapen kan verdsettes som fast, relativ, absolutt, klebrig og statisk. « absolutt ”-verdien vil plassere elementet tilsvarende det nærliggende overordnede elementet. Dette innlegget har forklart CSS absolutte posisjonering med et praktisk eksempel.