Suhteline positsioneerimine vs absoluutne positsioneerimine CSS-is: erinevus ja võrdlus

CSS-i maailm tutvustab meile mitmesuguseid tingimusi. CSS on HTML-is (märgistuskeel) oluline programmeerimiskeel.

Seda juhivad mitmed professionaalsed arvutieksperdid ja arvutianalüütikud. Kaks terminit, suhteline positsioneerimine ja absoluutne positsioneerimine, on CSS-i programmeerimiskeeles.

Võtme tagasivõtmine

1. Suhteline positsioneerimine liigutab elementi selle algse asukoha suhtes, ilma et see mõjutaks teiste elementide paigutust.
2. Absoluutne positsioneerimine eemaldab elemendi dokumendivoost ja asetab selle lähima positsioneeritud esivanema suhtes.
3. Suhteline positsioneerimine säilitab elemendi positsiooni dokumendivoos, samas kui absoluutne positsioneerimine võib kattuda või häirida teisi elemente.

Suhteline positsioneerimine vs absoluutne positsioneerimine CSS-is

Suhteline positsioneerimine on seotud elemendi liikumisega dokumendis. Dokumendi paigutus suhtelises paigutuses ei muutu. Absoluutne positsioneerimine on seotud elemendi liikumisega erinevates dokumentides või ühest dokumendist teise. Dokumendi kujundust saab muuta absoluutses positsioneerimises.

Suhteline positsioneerimine CSS-is on programmeerimises üks väärtuslikumaid termineid (mida kasutavad arvutianalüütikud).

See liigutab elementi nii, et see jääb algse asukoha suhtes. Mõiste "suhteline" viitab millelegi, mida mõõdetakse proportsionaalselt tervikuga.

See ei muuda dokumendi kujundust. See liigutab objekti vasakule, paremale, üles ja alla.

Absoluutne positsioneerimine CSS-is on väärtuslik positsioonitüüp, mis aitab teil paigutada elemendi kuhu iganes soovite.

Selle animatsioonitüüp on diskreetne (sarnane suhtelise asukoha animatsioonitüübiga). Selle positsiooni g-kood on G90. Absoluutne asukoht asetab elemendi alati vanema suhtes.

Seda tüüpi positsioon kehtib nimega elementide kohta.

Võrdlustabel

Võrdlusparameetrid	Suhteline positsioneerimine CSS-is	Absoluutne positsioneerimine CSS-is
funktsioon	Suhteline positsioneerimine liigutab elemendi dokumendis vasakule, paremale, ülemisele või alumisele alale.	Absoluutne positsioneerimine liigutab elemendi ühest dokumendivoost teise dokumendivoogu.
Millal kasutada	Suhtelist positsioneerimist kasutatakse siis, kui konkreetse lehe sisemine element positsioneeritakse absoluutselt.	Kui lehe elemendi sisemine element paikneb suhteliselt, kasutatakse absoluutset positsioneerimist.
Reageerima emakeelena	Suhteline positsioneerimine on vanema jaoks absoluutne.	Absoluutne positsioneerimine on vanema suhtes.
Tavaline dokumendivoog	Suhtelisel positsioneerimisel on tavalises dokumendivoos element.	Absoluutne positsioneerimine eemaldab elemendi tavalisest dokumendivoost.
Layout	Sel juhul paigutust ei muudeta või see jääb muutumatuks.	Paigutus on absoluutse positsioneerimise puhul muutunud.

Mis on suhteline positsioneerimine CSS-is?

Suhteline positsioneerimine CSS-is on programmeerimismaailmas üks väärtuslikumaid positsioneerimisi.

Seda positsioneerimist kasutatakse siis, kui konkreetse elemendi sisemine element tuleb absoluutselt asetada.

Suhtelise positsioneerimise korral asetatakse element alati absoluutselt põhipositsioonile ja oma tavaasendi suhtes.

CSS-is põhjustab suhteline positsioneerimine elemendi liikumise kas vasakule, paremale, alumisse või ülemisse asendisse.

Seda tüüpi paigutus võib põhjustada mõne tühja ruumi või tühikute moodustumist, mida ei saa täita. Seda tüüpi positsioneerimine ei muuda paigutust.

Mõiste "suhteline positsioneerimine" mõistmiseks tuleb mõista mitmeid üksikasju. Mõned neist üksikasjadest on toodud allpool.

• Animatsiooni tüüp – diskreetne
• Arvutatud väärtus – nagu määratud
• Vaikeväärtus – staatiline

Suhteline positsioneerimine hoiab elemendi tavalises dokumendis voog. Elemendi tavaasend jääb sarnaselt staatilisele väärtusele dokumendis. CSS määrab seda tüüpi positsioneerimisele ainulaadse vastutuse.

Suhteline positsioneerimine täidab mitmeid funktsioone. Mõned neist funktsioonidest on järgmised:

• See aitab määrata elemendi asukohta/asukohta.
• See aitab reguleerida elemendi asukohta selle algses asendis.
• Suhteline positsioneerimine annab võimaluse positsioneerida sisemisi elemente (leheelemendi sees).

Mis on absoluutne positsioneerimine CSS-is?

Absoluutne positsioneerimine CSS-is on ainulaadne positsioneerimistüüp, mis muudab lehe paigutust.

See positsioneerimistüüp eemaldab elemendi tavalisest dokumendivoost; seega on teised elemendid paigutatud nii, nagu seda konkreetset elementi pole kunagi eksisteerinud.

Absoluutse positsioneerimise korral asetatakse element alati põhipositsiooni suhtes ja absoluutselt oma tavaasendisse.

CSS-is kasutatakse absoluutset positsioneerimist siis, kui konkreetse elemendi lehe sisemine element tuleb suhteliselt paigutada. Nimetatud elementide puhul kasutatakse absoluutset positsioneerimist.

See ei tööta klasside ega üldiste elementide tüüpide puhul. Seda tüüpi positsioneerimise põhiprintsiip on see, et see töötab korraga ainult ühe elemendi puhul.

Paljud arvutianalüütikud ja -spetsialistid ei tea, kuidas elementi absoluutse positsioneerimise abil tsentreerida.

Allpool on toodud mõned sammud, kuidas seda tüüpi positsioneerimist kasutades elemendi tsentreerida.

• Lisage vasak 50℅ elemendile, mida soovite tsentreerida.
• Lisage negatiivne vasak veeris, mis võrdub poole elemendi laiusega.
• Seejärel lisage ülemine osa 50℅ elemendile, mida soovite tsentreerida.
• Ja lõpuks lisage negatiivne ülemine veeris, mis võrdub poolega tööriista laiusest.

Peamised erinevused suhtelise ja absoluutse positsioneerimise vahel CSS-is

1. Suhteline positsioneerimine on vanema suhtes absoluutne, teisest küljest aga absoluutne positsioneerimine vanema suhtes.
2. Suhteline positsioneerimine liigutab elemendi kindla dokumendipaigutusega, samas kui absoluutne positsioneerimine teisaldab elemendi ühest dokumendist teise.
3. Paigutus jääb suhtelise positsioneerimise korral samaks, samas kui absoluutne positsioneerimine muudab paigutust.
4. Element jääb normaalsesse dokumendivoogu võrreldes, samas kui absoluutse positsioneerimise korral võetakse element tavalisest dokumendivoost välja.
5. Suhtelise positsioneerimise korral on sisemine element positsioneeritud, seevastu absoluutses positsioneerimises on sisemine element absoluutselt positsioneeritud.

viited

1. https://dl.acm.org/doi/abs/10.1145/1067170.1067190
2. https://link.springer.com/article/10.1007/PL00012910

Viimati värskendatud: 26. juulil 2023