Posisjonen til HTML -elementene spiller en viktig rolle i å organisere websidekomponentene. Mer spesifikt kan elementene plasseres ved å bruke CSS “posisjon”Eiendom. Denne egenskapen kan være assosiert med forskyvningsegenskaper, for eksempel øverste, venstre, høyre og bunnegenskaper, og gir spesifikke verdier for å justere elementet på siden. Imidlertid "Absolutt”Plasserte elementer kan justeres i forhold til nærmeste plasserte element.

Dette innlegget vil forklare CSS absolutte posisjonering.

CSS “posisjon” eiendom

“posisjon”Eiendom i CSS kan brukes til å justere elementets posisjon. Ulike verdier av posisjonsegenskapen er faste, absolutte, relative, statiske og klissete. Disse verdiene er satt med forskyvningsegenskapene, for eksempel topp, høyre, venstre og bunn, for å justere elementets posisjon.

Hvordan bruke CSS absolutt posisjonering?

Elementets absolutte posisjonering kan brukes ved hjelp av CSS “posisjon”Eiendom med verdien”Absolutt”. Elementet med den absolutte posisjonen justeres tilsvarende det nærmeste plasserte overordnede elementet. Men hvis stamfaren ikke er plassert, vil den justere seg i forhold til kroppsdelen av dokumentet.

Eksempel

La oss forstå konseptet med et praktisk eksempel.

Trinn 1: Opprett en HTML -fil

I HTML -filen, innenfor kroppselementet, legger du til en div med klassenavnet "hoved-”. Deretter, inne i den opprettede div, legger du til en HTML -tag tilknyttet følgende attributter:

• • “src”Gir en lenke til bildet.
  • “klasse”Brukes i CSS for å style elementene.
  • “alt”Attributt spesifiserer teksten som viser i stedet for bildet hvis bildet ikke klarer å laste på siden.
  • “alt”Attributt Angir teksten som viser på siden i stedet for bildet hvis bildet ikke klarer å laste på siden.

Legg deretter til en annen div som inneholder overskriften og avsnittets H1- og P -elementer:

CSS absolutt posisjonering

Hei Linuxhint -teamet!

I CSS brukes flere stylingegenskaper for å dekorere HTML -elementene.

Trinn 2: Stil “alle” elementer

*
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;

HTML -elementene er stylet 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 som brukes på "hjem”Div:

• • “posisjon”Eiendom setter elementets posisjon. Her, den lagt til “Absolutt”Vil plassere elementet i forhold til kroppsdelen av HTML.
  • “topp”Eiendom brukes til den vertikale justeringen av elementet.
  • “venstre”Eiendom brukes til horisontalt justering av elementet.

Trinn 4: Stil "innhold" Div

.innhold
Bakgrunnsfarge: CadetBlue;
Bredde: 300px;
Høyde: 250px;
Padding-Left: 40px;
Margin-venstre: 80px;

Nedenfor er CSS -egenskapene som brukes på “innhold”Div:

• • “bakgrunnsfarge”Eiendom setter elementets bakgrunnsfarge.
  • “bredde”Eiendom setter elementets bredde.
  • “høyde”Eiendom setter elementets høyde.
  • “Padding-venstre”Eiendom er innstilt på å legge plass til venstre side av elementets innhold.
  • “margin-venstre”Eiendom spesifiserer plassen på venstre side av elementet.

På dette tidspunktet vil websiden vår se slik ut:

Det kan sees fra ovennevnte resultat at bildet av DIV -hjemmet er plassert på 50px fra toppen og 45px fra venstre for dokumentets kropp. Dessuten settes hjemme -divs stilling i forhold til kroppsdelen av HTML.

Hvordan justere posisjonen til elementet “relativ” til plassert overordnede element?

Denne delen vil veilede deg for å justere elementets posisjon i forhold til nærmeste posisjonsforeldreelement.

Angi "posisjon" -egenskap for "innhold" Div

Posisjon: relativ;

For å justere elementets plassering i forhold til overordnede element, må du angi “posisjon”Foreldres element til“slektning”Verdi.

Angi "posisjon" -egenskap til "IMG" -elementet

.Hjem
Posisjon: Absolutt;
Topp: 100px;
Venstre: 220px;

Her:

• • “posisjon”Eiendom med verdien som“Absolutt”Vil bli plassert i forhold til overordnede element (det vil si at Content Div Position er satt med verdien relativ).
  • “topp”Eiendom brukes til å sette elementposisjonen fra toppen.
  • “venstre”Eiendom brukes til å sette elementposisjonen fra venstre.

Produksjon

Det kan sees fra resultatet at bildet har blitt plassert i forhold til den overordnede Div, og det ser passende ut.

Konklusjon

CSS “posisjon”Eiendom brukes til å sette posisjonen til HTML -elementene. Denne egenskapen kan verdsettes som fast, relativ, absolutt, klissete og statisk. “Absolutt”Verdien vil plassere elementet som tilsvarer det nærliggende posisjonerte overordnede elementet. Dette innlegget har forklart CSS absolutte posisjonering med et praktisk eksempel.