Bruker posisjon i CSS

CSS gir forskjellige egenskaper for å style websidene som er opprettet i HTML. Ved hjelp av disse egenskapene kan du designe forskjellige elementer. En så mest fantastisk eiendom er "posisjon”Eiendom. CSS “posisjon”Eiendom er en av de vanligste og essensielle egenskapene som brukes til å justere posisjonen til HTML -elementene.

Denne håndboken vil guide deg om CSS -posisjonseiendommen. Så la oss begynne.

Hva er CSS “Position” eiendom?

I CSS, “posisjon”Brukes til å spesifisere hvor et element vil vises på siden basert på dens posisjon. Å kombinere den med topp-, høyre-, bunn- og venstre CSS -egenskaper avgjør hvor elementet skal plasseres.

Syntaks

Syntaksen til CSS -posisjonsegenskapen er gitt nedenfor:

Posisjon: Verdier

I stedet for “verdi”, Kan du stille inn elementerens plassering som“statisk”,“slektning”,“Absolutt”, Og“fikset”.

La oss se nærmere på hver verdi med eksempler for å forstå hvordan de påvirker plasseringen til sideelementene.

Eksempel

I HTML vil vi legge til to containere inne i kroppskoden og tilordne klassenavnet til første div som "Div1”Og den andre diven som“Div2”:

Div 1
Div 2

Etter det vil vi style kroppens side ved å bruke "kropp”I CSS og sett bakgrunnsfargen på kroppen som“RGB (127, 255, 212)”:

kropp
bakgrunnsfarge: RGB (127, 255, 212);

Det kan sees at bakgrunnsfarge brukes på nettsiden:

I vår CSS -fil, bruk "div”Å bruke de samme egenskapene på containerne på en gang. Juster bredden og høyden på diven som “100px”Og marginen som“30px”. For å stille formen til divene, bruk "Border-Radius”Eiendom og setter verdien som“30px”. Deretter justerer du teksten til div ved å bruke "Tekstalign”Eiendom for å angi DIV -teksten på“senter”Posisjon og“linjehøyde”Eiendom som“100px”:

div
Bredde: 100px;
Høyde: 100px;
Margin: 30px;
Border-Radius: 10px;
tekst-align: sentrum;
linjehøyde: 100px;

Etter det, sett fargen på diven for å differensiere dem. For å gjøre det, bruk ".Div1”For å få tilgang til den første diven og sette sin bakgrunnsfarge som“RGB (236, 226, 128)”:

.div1
bakgrunnsfarge: RGB (236, 226, 128);

Nå, bruk “.Div2”For å få tilgang til den andre diven og sette sin bakgrunnsfarge som“RGB (187, 166, 214)”:

.div2
bakgrunnsfarge: RGB (187, 166, 214);

Resultatet av ovennevnte kode er gitt nedenfor:

Hva er "statisk" posisjon i CSS?

“statisk”Brukes til å sette posisjonen med hensyn til den normale sidestrømmen. Det er satt som standard. Videre har egenskapene øverst, nederst, venstre og høyre ikke innvirkning på det.

Eksempel

Her vil vi sette posisjonen til begge div som statisk. Merk at alle andre egenskaper til begge containere vil forbli de samme:

.div1
..
Posisjon: statisk;

.div2
..
Posisjon: statisk;

Du kan se at divene er plassert i sin opprinnelige posisjon:

Hva er "relativ" stilling i CSS?

For å sette elementets posisjon i forhold til dens normale stilling, "slektning”Verdien av posisjonsegenskapen brukes.

Eksempel

Vi vil sette posisjonen til “Div1" som "slektning”Og“Div2" som "Absolutt”. Her er den andre diven plassert i henhold til Div1:

.div1
..
Posisjon: relativ;

.div2
..
Posisjon: Absolutt;

Her er resultatet som viser at Div2 er justert i henhold til plasseringen av Div 1:

Hva er "fast" posisjon i CSS?

HTML -elementer kan fikses i nettleseren ved å bruke "fikset”Verdien av posisjonsegenskapen. Plasseringen av faste elementer bestemmes av visningsporten, området for dokumentet som er synlig for øyeblikket. Ved hjelp av nettleservinduet som referanse, er dette faste elementet plassert i forhold til det.

Eksempel

Vi vil sette posisjonen til “Div1" som "fikset”Og“Div2" som "statisk”. Her vil vi bruke den statiske verdien for å sette posisjonen til “Div2”I henhold til normal sidestrøm:

.div1
..
Posisjon: Fast;

.div2
..
Posisjon: statisk;

Her kan du se at posisjonen til “Div1”Er fast og“Div2”Settes i henhold til sidestrømmen:

Hva er "absolutt" posisjon i CSS?

I “Absolutt”Posisjonering er elementet plassert i forhold til det første overordnede elementet, som ikke er statisk. Dessuten kan et element plasseres hvor som helst på en side ved hjelp av absolutt posisjonering.

Eksempel

Vi vil sette posisjonen til “Div1" som "slektning”Og“Div2" som "Absolutt”. Etter det vil vi bruke “bunn”Eiendom som“5px”For å angi DIV2 nederst på siden:

.div1
..
Posisjon: relativ;

.div2
..
Posisjon: Absolutt;
Bunn: 5px;

Følgende bilde viser at DIV2 er plassert nederst på siden:

Det er det! Vi har forklart beskrivelsen av posisjonsegenskapen i detalj.

Konklusjon

For å sette posisjonen til HTML -elementet, "posisjon”Eiendom til CSS brukes. Posisjonsegenskapen støtter fire forskjellige verdier som statiske, relative, faste og absolutte. I denne artikkelen har vi forklart posisjonsegenskapen i detalj og gitt eksempler for alle dens verdier.