Umístění CSS je více než jen souřadnice X a Y
Umístění CSS je již dlouho důležitou součástí tvorby rozvržení stránek. Dokonce i se vzestupem novějších technik rozvržení CSS, jako je Flexbox a CSS Grid, má polohování stále důležitou pozici v triku triků.
Při použití polohování CSS je třeba nejprve nastavit vlastnost CSS pro pozici, která řeší prohlížeč, pokud použijete absolutní nebo relativní umístění daného prvku. Musíte také jasně 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á je výchozí pozice pro libovolný prvek na webové stránce. Pokud neurčíte polohu prvku, bude to statické. To znamená, že se bude zobrazovat na obrazovce podle toho, kde se nachází v dokumentu HTML a jak se bude zobrazovat uvnitř normálního toku tohoto dokumentu.
Pokud použijete pravidla pro určování polohy, jako je horní nebo levý prvek, který má statickou pozici, budou tato pravidla ignorována a prvek zůstane tam, kde se objeví v normálním toku dokumentů. Ve skutečnosti byste zřídkakdy, kdyby vůbec, museli nastavit prvek na statickou pozici v CSS, protože to je 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 odstraněn z normálního toku dokumentu, nebude to mít vliv na to, jak jsou prvky umístěné před nebo po něm v kódu HTML umístěny na webové stránce.
Jako příklad - pokud jste měli rozdělení, které bylo umístěno pomocí relativní hodnoty (krátce se na tuto hodnotu podíváme) a uvnitř této divize jste měli odstavec, který chcete umístit 50 pixelů od horní části divize, vy by přidal hodnotu pozice "absolutní" k tomuto odstavci spolu s hodnotou offset 50px na "top" vlastnost, jako je toto.
poloha: absolutní; horní: 50px;Tento absolutně umístěný prvek by pak vždy zobrazoval 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žil relativně umístěný jeden jako jeho kontext a pozitivní hodnota, kterou používáte, je relativní.
Čtyři polohovací vlastnosti, které máte k dispozici, jsou:
- horní
- že jo
- dno
- vlevo, odjet
Můžete použít buď horní nebo dolní (protože element nemůže být umístěn podle obou těchto hodnot) a buď vpravo nebo vlevo.
Je-li prvek nastaven na absolutní polohu, ale nemá žádné nestandardně umístěné předky, bude umístěn vzhledem k prvku tělesa, což je prvek nejvyšší úrovně stránky.
Relativní umístění
Již jsme se zmínili o relativním umístění, takže se nyní podíváme na tuto nemovitost.
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 nestálé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á na sobě umístěn styl "relativní": pozice bude posunuta na základě jeho aktuální polohy.
Odstavec 1.
Odstavec 2.
Ve výše uvedeném příkladu bude třetí odstavec umístěn 2m od levé strany kontejnerového prvku, bude však stále pod dvěma prvními odstavci. Zůstane v normálním toku dokumentu a bude lehce odsazeno. Pokud jste jej změnili na pozici: absolutní; všechno, co následuje, by se na něm objevilo, protože by už nebylo v normálním toku dokumentu.
Prvky na webové stránce se často používají pro nastavení hodnoty polohy: relativní bez stanoveného posunu, 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 divizi, která obklopuje celý web s hodnotou třídy "kontejner" (což je velmi běžný scénář v návrhu webových stránek), může být toto dělení nastaveno na relativní pozici, 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šechno ostatní na stránce se bude pohybovat 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 bude vytištěn na daném místě při tisku webové stránky. 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 obrazovka {h1 # první {pozice: pevná; }} @media tisk {h1 # první {pozice: statický; }}Původní článek Jennifer Krynin. Upravil Jeremy Girard dne 1.7.16.