Forskjell mellom CSS -posisjonen relativ og absolutt

I CSS, “posisjon”Eiendom brukes til å angi elementets posisjon der HTML -elementene skal vises på websiden. Denne egenskapen er bundet med venstre, høyre, topp- og bunnegenskaper for å angi den endelige plasseringen av HTML -elementet.

Denne bloggen vil diskutere:

• Hva er CSS “posisjon”Typer?
• Hvordan bruke CSS “Posisjon: relativ”Eiendom?
• Hvordan bruke CSS “Posisjon: Absolutt”Eiendom?

Hva er CSS “posisjon” -typer?

Det er fem typer CSS -stillinger:

• “statisk”: De statisk plasserte elementene påvirkes ikke av forskjøvetegenskaper nederst, venstre, høyre og topp. Det er standardverdien til et HTML -element.
• “fikset”: Det faste plasserte elementet forblir på samme sted der det er satt til og med på skjermbilen.
• “klissete”: Et klebrig plassert element vil forbli statisk når brukeren ruller skjermen.
• “Absolutt”: Et absolutt element er plassert eller plassert i forhold til nærmeste eller nærmeste plasserte stamfar HTML -element.
• “slektning”: Det relative elementet er plassert i forhold til dens normale stilling.

Nå, før vi diskuterer forskjellen mellom det relative og absolutt plasserte elementet, vil vi opprette en webside for demonstrasjonen.

Forutsetning

I HTML, først, legg til et DIV -element med klasseattributtnavnet "Div-foreldre”. Inne i dette, inkluder fire flere tagger med klassenavnet “Div-1”. Merk at bare den andre vil ha to klasser, “Div-1”Og“posisjonering”.

Html

La oss bruke CSS -styling på elementene som er nevnt i ovennevnte HTML -kodeblokk.

Stil “Div-Parent” Div

.Div-foreldre
Margin-top: 100px;
Posisjon: relativ;

Div -elementet med klassenavn "Div-foreldre”Er stylet med CSS -egenskapene som er forklart nedenfor:

• “margin-topp”Eiendom brukes til å sette plassen på toppen av DIV -elementet.
• “posisjon”Eiendom er satt som“slektning”, Som posisjoner eller plasserer det valgte elementet i forhold til dets normale posisjon.

Stil “div-1” div

.Div-1
bakgrunnsfarge: Blueviolet;
Bredde: 200px;
Høyde: 200px;
Grense: 5px stiplet #000000;
Display: Inline-block;

Her er forklaringen på de anvendte egenskapene:

• “bakgrunnsfarge”Eiendom setter bakgrunnsfargen på DIV -elementet.
• “bredde”Eiendom definerer bredden på det ekstra HTML -elementet.
• “høyde”Eiendoms verdi representerer høyden på HTML -elementet.
• “grense”Eiendom bruker grensen rundt et element. Det er spesifisert ved å bruke verdiene for bredde, stil og farge.
• “vise”Med verdien”Inline-block”Eiendom tillater påføring av bredde og høyde på elementet.

Hvordan bruke “Posisjon: relativ” i CSS?

Når du angir “posisjon”Eiendoms verdi som“slektning”, Beveger seg i forhold til dens normale stilling. Posisjonen avhenger også av verdiene som sideegenskapene. Imidlertid vil andre elementer ikke bli endret for å fylle gapet som er igjen av elementet.

Stil “posisjonering” div

.posisjonering
bakgrunnsfarge: sjokolade;
Posisjon: relativ;
Topp: 20px;
Venstre: 20px;

Her:

• “posisjon”Eiendomsverdien er satt som“slektning”, Som plasserer elementet i forhold til dets normale posisjon. Den blir deretter sammenkoblet med topp-, høyre-, venstre- og bunnegenskaper for å stille den endelige plasseringen.
• “topp”Eiendom med verdien”20px”Setter et rom på 20px over et element.
• “venstre”Eiendom med verdien”20px”Gir et rom på 20px på venstre side av et element.

Resultatet nedenfor viser tydelig at den andre boksen er flyttet fra toppen og venstre:

Hvordan bruke “Posisjon: Absolutt” i CSS?

“posisjon”Eiendom med verdien”Absolutt”Endrer elementets posisjon i forhold til den plasserte overordnede Div. Hvis ikke foreldrelementets plassering er angitt, vil DIV bevege seg i forhold til websidenes kropp. Dessuten vil andre elementer fylle plassen som er igjen av elementet.

La oss endre “posisjon”Div eiendom med klassen som heter“posisjonering”Fra relativt til absolutt og se forskjellen:

Posisjon: Absolutt;

Den andre boksen er satt til 20px -plass fra topp- og 20px -plassen fra venstre i forhold til foreldreelementet:

Det handlet om den relative og absolutte posisjonen i CSS.

Konklusjon

I CSS, for å definere den endelige plasseringen av elementet, brukes posisjonsegenskapen. Mer spesifikt, “slektning”Posisjon plasserer elementets posisjon i forhold til dens normale stilling, mens“Absolutt”Posisjon plasserer elementet i forhold til det plasserte foreldrene HTML -elementet. Denne bloggen diskuterte forskjellen mellom relative og absolutte CSS -stillinger.