Relativní umístění vs absolutní umístění v CSS: Rozdíl a srovnání

Svět CSS nás seznamuje s různými podmínkami. CSS je důležitý programovací jazyk v HTML (značkový jazyk).

Je provozován několika profesionálními počítačovými odborníky a počítačovými analytiky. V programovacím jazyce CSS jsou dva pojmy, relativní umístění a absolutní umístění.

Key Takeaways

1. Relativní umístění přesune prvek vzhledem k jeho původní poloze bez ovlivnění rozvržení ostatních prvků.
2. Absolutní umístění odebere prvek z toku dokumentu a umístí jej vzhledem k jeho nejbližšímu umístěnému předkovi.
3. Relativní umístění udržuje polohu prvku v toku dokumentu, zatímco absolutní umístění může překrývat nebo narušovat jiné prvky.

Relativní umístění vs absolutní umístění V CSS

Relativní umístění souvisí s pohybem prvku v dokumentu. Rozvržení dokumentu se nemění v relativním umístění. Absolutní umístění souvisí s pohybem prvku v různých dokumentech nebo z jednoho dokumentu do druhého. Rozvržení dokumentu lze změnit v absolutním umístění.

Relativní umístění v CSS je jedním z nejcennějších pojmů (používaných počítačovými analytiky) v programování.

Přesune prvek tak, aby zůstal relativně vůči své původní poloze. Termín „relativní“ se vztahuje k něčemu měřenému v poměru k celku.

Nezmění rozvržení dokumentu. Pohybuje objektem doleva, doprava, nahoru a dolů.

Absolute Positioning v CSS je cenným typem pozice, která vám pomůže umístit prvek kamkoli chcete.

Jeho typ animace je diskrétní (podobně jako typ animace relativní pozice). G-kód této pozice je G90. Absolutní poloha vždy umístí prvek vzhledem k nadřazenému prvku.

Tento typ pozice platí pro pojmenované prvky.

Srovnávací tabulka

Parametry srovnání	Relativní umístění v CSS	Absolutní umístění v CSS
funkce	Relativní umístění přesune prvek do levé, pravé, horní nebo dolní oblasti v dokumentu.	Absolutní umístění přesune prvek z jednoho toku dokumentů do jiného toku dokumentů.
Kdy použít	Relativní umístění se používá, když bude vnitřní prvek konkrétní stránky umístěn absolutně.	Když se vnitřní prvek prvku na stránce umístí relativně, použije se absolutní umístění.
Reagujte nativní	Relativní umístění je vůči rodiči absolutní.	Absolutní umístění je relativní vzhledem k rodiči.
Normální tok dokumentů	Relativní umístění má prvek v normálním toku dokumentů.	Absolutní umístění vyjme prvek z normálního toku dokumentu.
Nákres	V tomto případě se rozložení nezmění nebo zůstane nezměněno.	Rozložení se změnilo v případě absolutního umístění.

Co je relativní umístění v CSS?

Relativní umístění v CSS je jedním z nejcennějších umístění ve světě programování.

Toto umístění se používá, když je potřeba absolutně umístit vnitřní prvek určitého prvku.

Při relativním umístění je prvek vždy umístěn absolutně k nadřazenému prvku a relativně ke své normální poloze.

V CSS relativní umístění způsobuje, že se prvek pohybuje buď vlevo, vpravo, dole nebo nahoře.

Tento typ uspořádání může vést k vytvoření několika prázdných míst nebo mezer, které nelze vyplnit. Tento typ umístění nemění rozložení.

K pochopení pojmu „relativní umístění“ je třeba porozumět několika detailům. Některé z těchto podrobností jsou uvedeny níže:

• Typ animace – Diskrétní
• Vypočítaná hodnota – podle specifikace
• Výchozí hodnota – Statická

Relativní umístění udržuje prvek v normálním dokumentu průtok. Normální pozice prvku zůstává v dokumentu, podobně jako u statické hodnoty. CSS přiřazuje tomuto typu umístění jedinečnou odpovědnost.

Několik funkcí zajišťuje relativní umístění. Některé z těchto funkcí jsou:

• Pomáhá určit polohu/umístění prvku.
• Pomáhá upravit polohu prvku v jeho původní poloze.
• Relativní umístění dává možnost umístit vnitřní prvky (v rámci prvku stránky).

Co je absolutní umístění v CSS?

Absolutní umístění v CSS je jedinečný typ umístění, který mění rozložení stránky.

Tento typ umístění vyjímá prvek z normálního toku dokumentů; ostatní prvky jsou tedy umístěny tak, jako by tento konkrétní prvek nikdy neexistoval.

Při absolutním umístění je prvek vždy umístěn relativně k rodiči a absolutně ke své normální poloze.

V CSS se absolutní umístění používá, když je potřeba relativně umístit vnitřní prvek stránky určitého prvku. U pojmenovaných prvků se používá absolutní umístění.

Nefunguje na třídách nebo obecných typech prvků. Hlavním principem tohoto typu polohování je, že funguje vždy pouze na jednom prvku.

Několik počítačových analytiků a specialistů neví, jak vycentrovat prvek pomocí absolutního umístění.

Níže je uvedeno několik kroků, jak provést centrování prvku pomocí tohoto typu umístění:

• Přidejte doleva k 50℅ prvku, který chcete vycentrovat.
• Přidejte záporný levý okraj, který se rovná polovině šířky prvku.
• Poté přidejte horní část k 50℅ prvku, který chcete vycentrovat.
• A nakonec přidejte záporný horní okraj, který se rovná polovině šířky nástroje.

Hlavní rozdíly mezi relativním umístěním a absolutním umístěním V CSS

1. Relativní umístění je absolutní vůči svému rodiči, zatímco na druhé straně absolutní umístění je relativní vůči svému rodiči.
2. Relativní umístění přesune prvek s konkrétním rozvržením dokumentu, zatímco na druhé straně absolutní umístění přesune prvek z jednoho dokumentu do druhého.
3. Rozložení zůstává stejné v případě relativního umístění, zatímco na druhé straně absolutní umístění změní rozložení.
4. Prvek zůstává v rámci normálního toku dokumentu vzhledem k, zatímco na druhé straně při absolutním umístění je prvek vyjmut z normálního toku dokumentů.
5. Při relativním umístění je vnitřní prvek umístěn relativně, zatímco na druhé straně při absolutním umístění je vnitřní prvek umístěn absolutně.

Reference

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

Poslední aktualizace: 26. července 2023