CSS positioning je už dlho dôležitou súčasťou tvorby webových stránok. Dokonca aj s rastúcimi technikami rozloženia CSS, ako sú Flexbox a CSS Grid, má polohovanie stále dôležitú pozíciu v každom vrecku trikov.
Pri používaní polohovania CSS je prvou vecou, ktorú musíte urobiť, aby ste vytvorili vlastnosť CSS pre pozíciu, aby ste prehliadačovi povedali, či použijete absolútne alebo relatívne umiestnenie pre daný prvok. Musíte tiež 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é polohovanie
Statická hodnota je predvolená pozícia pre ľubovoľný prvok na webovej stránke. Ak neurčíte pozíciu prvku, je to statické, čo znamená, že sa zobrazuje na obrazovke podľa toho, kde sa nachádza v dokumente HTML a ako sa zobrazuje vo vnútri normálneho toku tohto dokumentu.
Ak použijete pravidlá určovania polohy, ako napríklad top alebo ľavý na prvok, ktorý má statickú polohu, tieto pravidlá sa ignorujú a prvok zostáva tam, kde sa objavuje v bežnom toku dokumentov. Málokedy, ak vôbec, musíte nastaviť prvok do statickej polohy v CSS, pretože je to 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. Toto sa vypočíta na základe najbližšieho neštastického predka tohto prvku. Pretože absolútne umiestnený prvok je vyňatý z normálneho toku dokumentu, ovplyvňuje to, ako prvky umiestnené pred ním alebo po ňom v HTML sú umiestnené na webovej stránke. Napríklad, ak máte rozdelenie, ktoré je umiestnené pomocou hodnoty relatívnej a vnútri tejto divízie, máte odsek, ktorý chcete umiestniť 50 pixelov od hornej časti divízie, pridáte hodnotu pozície absolútny k tomuto odseku spolu s hodnotou offsetu 50 pixelov na top majetok, ako je toto: poloha: absolútna;top: 50px;
Tento absolútne umiestnený prvok vždy zobrazuje 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žíva relatívne umiestnený prvok ako jeho kontext a hodnota polohy, ktorú používate, je relatívna. Štyri polohovacie vlastnosti, ktoré máte k dispozícii, sú: Môžete použiť buď top alebo dno - pretože prvok nemôže byť umiestnený podľa obidvoch týchto hodnôt - a ani jeden správny alebo ľavý. Ak je prvok nastavený na absolútnu pozíciu, ale nemá žiadnych nestátne umiestnených predkov, potom je umiestnený vzhľadom na prvok tela, ktorý je prvkom najvyššej úrovne stránky. Relatívne polohovanie využíva rovnaké štyri polohovacie vlastnosti ako absolútne polohovanie, ale namiesto toho, aby postavil prvok na svoj najbližší neštaticky umiestnený predok, 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 tretia má a pozícia: relatívna štýl umiestnený na ňom, jeho poloha je odsadená na základe jeho aktuálneho umiestnenia. Odsek 1. Odsek 2. Odsek 3. Vo vyššie uvedenom príklade je tretí odsek umiestnený 2m od ľavej strany kontajnerového prvku, ale stále pod prvými dvoma odsekmi. Zostáva v normálnom toku dokumentu a je mierne odsadený. Ak to zmeníte poloha: absolútna, nad ním sa zobrazuje všetko, čo nasleduje, pretože už nie je v bežnom toku dokumentu. Prvky na webovej stránke sa často používajú na nastavenie hodnoty pozícia: relatívna bez stanovenej odchýlky, čo znamená, že prvok zostáva presne tam, kde by sa objavil pri 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 rozdelenie okolo celej vašej webovej stránky s hodnotou triedy kontajner, ktorý je bežným scenárom pri návrhu webových stránok, môže byť toto rozdelenie nastavené na pozíciu relatívna takže čokoľvek v ňom môže použiť ako polohovací kontext. 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 na tomto mieste fixujú - takmer ako vodoznak. Všetko ostatné na stránke sa potom posúva 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 vaša webová stránka vytlačená. Ak je napríklad váš prvok opravený v hornej časti vašej 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 screen { h1 # prvý {pozícia: pevná; } } @media print { h1 # prvý {pozícia: statická; } }
Relatívne umiestnenie
Čo s pevným polohovaním?
