Polohovanie CSS je viac ako iba súradnice X, Y
CSS positioning je už dlho dôležitou súčasťou tvorby webových stránok. Dokonca aj s nárastom novších technik rozloženia CSS, ako je Flexbox a CSS Grid, má polohovanie stále dôležitú pozíciu v každom vrecku trikov.
Keď použijete nastavenie CSS, prvá vec, ktorú budete musieť urobiť, je vytvoriť vlastnosť CSS, aby ste pozvali prehliadač, ak použijete absolútne alebo relatívne umiestnenie pre daný prvok. Musíte tiež jasne pochopiť rozdiel medzi týmito dvomi polohovacími vlastnosťami.
Zatiaľ čo absolútne a relatívne sú dve vlastnosti polohy CSS, ktoré sa najčastejšie používajú pri návrhu webových stránok, vlastnosť pozície je vlastne štyri stavy:
- statický
- absolútny
- relatívna
- fixné
Statická hodnota je predvolená poloha pre ľubovoľný prvok na webovej stránke. Ak neurčíte polohu prvku, bude to statické. To znamená, že sa zobrazí na obrazovke podľa toho, kde sa nachádza v dokumente HTML a ako sa bude zobrazovať vo vnútri normálneho toku tohto dokumentu.
Ak použijete pravidlá umiestnenia, napríklad horné alebo ľavé na prvok, ktorý má statickú pozíciu, tieto pravidlá budú ignorované a prvok zostane tam, kde sa zobrazí v bežnom toku dokumentov. V skutočnosti by ste zriedkakedy, ak vôbec niekedy, museli nastaviť prvok na statickú pozíciu v CSS, pretože to je predvolená hodnota.
Absolútne umiestnenie CSS
Absolútne umiestnenie je pravdepodobne najjednoduchšia pozícia CSS, aby ste pochopili. Začíname s touto vlastnosťou pozície CSS:
poloha: absolútna;Táto hodnota informuje prehliadač, že všetko, čo sa má umiestniť, by malo byť odstránené z normálneho toku dokumentu a namiesto toho by malo byť umiestnené na presnom mieste na stránke. Vypočíta sa na základe najbližšieho neštaticky umiestneného predka tohto prvku.
Pretože absolútne umiestnený prvok je vyňatý z normálneho toku dokumentu, nebude to mať vplyv na to, ako prvky umiestnené pred alebo po ňom v HTML sú umiestnené na webovej stránke.
Napríklad - ak ste mali rozdelenie, ktoré bolo umiestnené pomocou hodnoty relatívnej (krátko sa pozrieme na túto hodnotu) a vo vnútri tejto divízie ste mali odsek, ktorý ste chceli umiestniť 50 pixlov z hornej časti divízie, vy by pridal hodnotu pozície "absolútne" k tomuto odseku spolu s hodnotou ofset 50px na "top" vlastnosť, ako je táto.
poloha: absolútna; top: 50px;Tento absolútne umiestnený prvok by potom vždy zobrazoval 50 pixlov od hornej časti relatívne umiestneného rozdelenia - bez ohľadu na to, čo inak zobrazuje v normálnom toku. Váš "absolútne" umiestnený prvok používal relatívne umiestnený jeden ako jeho kontext a pozitívna hodnota, ktorú používate, je relatívna.
Štyri polohovacie vlastnosti, ktoré máte k dispozícii, sú:
- top
- správny
- dno
- ľavý
Môžete použiť buď hornú alebo spodnú časť (pretože prvok nemôže byť umiestnený podľa obidvoch týchto hodnôt) a to buď vpravo alebo vľavo.
Ak je prvok nastavený na absolútnu pozíciu, ale nemá nijako staticky umiestnených predkov, potom bude umiestnený vzhľadom na prvok tela, ktorý je prvkom najvyššej úrovne stránky.
Relatívne umiestnenie
Už sme spomenuli relatívne umiestnenie, takže sa teraz pozrime na túto nehnuteľnosť.
Relatívne polohovanie používa rovnaké štyri polohovacie vlastnosti ako absolútne polohovanie, ale namiesto toho, aby postavil prvok na svojom najbližšom nestátom umiestnenom predkovi, začína odkiaľ by bol prvok, keby bol stále v bežnom prietoku.
Napríklad, ak máte na svojej webovej stránke tri odseky a na treťom mieste máte umiestnený štýl "pozícia: relatívny", jeho pozícia bude posunutá na základe jej aktuálnej polohy.
Odsek 1
Odsek 2
Vo vyššie uvedenom príklade bude tretí odsek umiestnený 2m od ľavej strany kontajnerového prvku, ale stále bude pod prvými dvoma odsekmi. Zostalo by to v bežnom toku dokumentu a malo by byť len mierne kompenzované. Ak ste ho zmenili na pozíciu: absolútne; čokoľvek, čo nasleduje, by sa na ňom zobrazovalo, pretože by už nebolo v bežnom toku dokumentu.
Prvky na webovej stránke sa často používajú na nastavenie hodnoty pozície: relatívna bez stanovenej hodnoty ofsetu, čo znamená, že prvok zostáva presne tam, kde by sa objavil v normálnom toku. To sa vykonáva výlučne na stanovenie tohto prvku ako kontextu, proti ktorému môžu byť ostatné prvky absolútne umiestnené. Napríklad, ak máte divíziu okolo celej vašej webovej stránky s hodnotou triedy "kontajnera" (čo je veľmi častý scenár v webovom dizajne), toto rozdelenie môže byť nastavené na relatívnu pozíciu tak, aby čokoľvek v ňom mohlo použiť ako kontext určovania polohy.
Čo s pevným polohovaním?
Pevné umiestnenie je veľmi podobné absolútnemu umiestneniu. Poloha prvku sa vypočíta rovnakým spôsobom ako absolútny model, ale fixné prvky sa potom fixujú na tomto mieste - takmer ako vodoznak . Všetko ostatné na stránke sa potom posunie okolo tohto prvku.
Ak chcete použiť túto hodnotu vlastníctva, nastavíte:
pozícia: pevná;Majte na pamäti, že keď opravíte prvok na svojom webe, vytlačí sa na tomto mieste, keď bude vytlačená vaša webová stránka. Napríklad, ak je váš prvok opravený v hornej časti stránky, zobrazí sa v hornej časti každej vytlačenej stránky - pretože je umiestnený v hornej časti stránky. Na zmenu spôsobu zobrazovania vytlačených stránok na pevných prvkoch môžete použiť typy médií:
@media obrazovka {h1 # first {pozícia: pevná; }} @media print {h1 # first {pozícia: statická; }}Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 1.7.16.