Absolutní vs. relativní - vysvětlení umístění CSS

Umístění CSS je již dlouho důležitou součástí tvorby rozvržení stránek. Dokonce i s nárůstem technik rozvržení CSS, jako je například Flexbox a CSS Grid, má polohování stále důležitou roli v trikonech webových návrhářů.

Při použití polohování CSS musíte nejprve nastavit vlastnost CSS pro pozici, která řekne prohlížeču, zda použijete absolutní nebo relativní umístění daného prvku. Také musíte pochopit rozdíl mezi těmito dvěma polohovacími vlastnostmi.

Zatímco absolutní a relativní jsou dvě vlastnosti polohy CSS, které se nejčastěji používají při návrhu webových stránek, vlastně jsou vlastně čtyři stavy:

• statický
• absolutní
• relativní
• pevný

Statické polohování

Statická hodnota je výchozí pozice pro libovolný element na webové stránce. Pokud neurčíte pozici prvku, je to statické, což znamená, že se na obrazovce zobrazuje podle toho, kde je v dokumentu HTML a jak se zobrazuje uvnitř normálního toku tohoto dokumentu.

Používáte-li pravidla pro určování polohy, jako například horní nebo vlevo, odjet na prvek, který má statickou polohu, jsou tato pravidla ignorována a prvek zůstává tam, kde se objeví v normálním toku dokumentu. Zřídka, pokud vůbec, musíte nastavit prvek na statickou pozici v CSS, protože je to výchozí hodnota.

Absolutní umístění CSS

Absolutní umístění je pravděpodobně nejjednodušší pozicí CSS, aby pochopilo. Začnete s tímto vlastnictvím polohy CSS:

poloha: absolutní;

Tato hodnota informuje prohlížeč, že vše, co má být umístěno, by mělo být odstraněno z normálního toku dokumentu a namísto toho umístěno na přesném místě na stránce. Toto je vypočítáno na základě nejbližšího nestálého předka tohoto prvku. Protože absolutně umístěný prvek je vyjmut z normálního toku dokumentu, ovlivní to, jak jsou prvky umístěné před nebo po něm v kódu HTML umístěny na webové stránce.

Například pokud máte divizi, která je umístěna pomocí relativní hodnoty a uvnitř této divize, máte odstavec, který chcete umístit 50 pixelů od horní části divize, přidáte hodnotu pozice absolutní k tomuto odstavci spolu s hodnotou offsetu 50px na horní majetek, jako je toto:

poloha: absolutní;horní: 50px;

Tento absolutně umístěný prvek vždy zobrazuje 50 pixelů od horní části relativně umístěného dělení, bez ohledu na to, co je v normálním toku zobrazeno. Váš absolutně umístěný prvek používá relativně umístěný jako svůj kontext a hodnota polohy, kterou používáte, je relativní.

Čtyři polohovací vlastnosti, které máte k dispozici, jsou:

• horní
• že jo
• dno
• vlevo, odjet

Můžete také použít horní nebo dno - protože element nemůže být umístěn podle obou těchto hodnot - a jeden že jo nebo vlevo, odjet.

Je-li prvek nastaven na absolutní polohu, ale nemá žádné nestandardně umístěné předky, je umístěn vzhledem k prvku tělesa, což je prvek nejvyšší úrovně stránky.

Relativní umístění

Relativní polohování využívá stejné čtyři polohovací vlastnosti jako absolutní polohování, ale namísto umístění pozice prvku na nejbližšího ne-staticky umístěného předku začíná od místa, kde by byl prvek, kdyby byl stále v normálním průtoku.

Například pokud máte na své webové stránce tři odstavce a třetí má a poloha: relativní umístěný na něm, je jeho poloha odsazena na základě jeho aktuálního umístění.

Odstavec 1.

Odstavec 2.

Odstavec 3.

Ve výše uvedeném příkladu je třetí odstavec umístěn 2m od levé strany kontejnerového prvku, ale stále pod prvními dvěma odstavci. Zůstává v normálním toku dokumentu a je nepatrně odsazen. Pokud to změníte poloha: absolutní, vše, co následuje, se na něm zobrazuje, protože již není v normálním toku dokumentu.

Elementy na webové stránce se často používají pro nastavení hodnoty poloha: relativní aniž by byla stanovena hodnota offsetu, což znamená, že prvek zůstává přesně tam, kde by se objevoval v normálním toku. To se provádí výlučně proto, aby se tento prvek určil jako kontext, proti kterému mohou být ostatní prvky zcela umístěny. Například pokud máte rozdělení kolem celého webu s hodnotou třídy kontejner, což je běžný scénář v návrhu webových stránek, lze toto rozdělení nastavit na pozici relativní takže něco uvnitř toho může použít jako polohovací kontext.

Co s pevným polohováním?

Pevné umístění je hodně podobné absolutnímu umístění. Poloha prvku se vypočítá stejným způsobem jako absolutní model, ale v tomto místě jsou fixní fixní prvky - téměř jako vodoznak. Vše ostatní na stránce se posouvá kolem tohoto prvku.

Chcete-li použít tuto hodnotu vlastnosti, nastavíte:

poloha: fixní;

Mějte na paměti, že při opravě prvku na vašem webu vytiskne na daném místě, když bude vytištěna vaše webová stránka. Pokud je například váš prvek v horní části stránky opraven, objeví se v horní části každé vytištěné stránky, protože je umístěn v horní části stránky. Pomocí typů médií můžete změnit způsob zobrazení pevných prvků na vytištěných stránkách:

@media screen { h1 # první {pozice: fixní; }} } @media print { h1 # první {pozice: statická; }} }