Ako používať vlastnosť position v CSS na zarovnanie prvkov
Umiestnenie prvkov pomocou CSS vo vývoji webu nie je také ľahké, ako sa zdá. Veci sa môžu rýchlo komplikovať, pretože sa váš projekt zväčšuje a bez toho, aby ste dobre pochopili, ako sa CSS vyrovnáva so zarovnávaním prvkov HTML, nebudete môcť vyriešiť problémy so zarovnaním.
Existujú rôzne spôsoby / metódy umiestňovania prvkov pomocou čistého CSS. Pri použití float CSS sú vlastnosti zobrazenia a polohy najbežnejšími metódami.
V tomto článku vysvetlím jeden z najviac mätúcich spôsobov zarovnania prvkov s čistým CSS: vlastnosť position. Mám tu tiež ďalší návod pre CSS Display Property.
Ak chcete, môžete si pozrieť video verziu CSS Positioning Tutorial:
Poďme začať...
Vlastnosti pozície a pomocníka CSS
Takže existuje 5 hlavných hodnoty Pozícia nehnuteľnosti :
position: static | relative | absolute | fixed | sticky
a ďalšie vlastnosti na nastavenie súradníc prvku (nazývam ich „pomocné vlastnosti“ ):
top | right | bottom | left A z-index
Čo je to tento z-index?
Máme výšku a šírku (x, y) ako 2 rozmery. Z je 3. dimenzia. Prvok na webovej stránke sa zobrazuje pred ostatnými prvkami, keď sa z-indexzvyšuje jeho hodnota.
position: staticdeklarovanou pozíciou alebo bez nej.
Môžete si pozrieť video na mojom kanáli a zistiť, ako podrobnejšie používať index z:
Poďme teraz k hodnotám vlastností polohy ...
1. Statické
position: staticje predvolená hodnota . Či už to deklarujeme alebo nie, prvky sú na webovej stránke umiestnené v normálnom poradí. Uveďme príklad:
Najskôr definujeme našu štruktúru HTML:
Potom vytvoríme 2 políčka a definujeme ich šírky, výšky a polohy:
.box-orange { // without any position declaration background: orange; height: 100px; width: 100px; } .box-blue { background: lightskyblue; height: 100px; width: 100px; position: static; // Declared as static }
Ako vidíme na obrázku, definícia polohy: statická alebo nie, nerobí žiadny rozdiel.Polia sú umiestnené podľa normálneho toku dokumentov .
2. Relatívne
position: relative: Nová poloha prvku vo vzťahu k jeho normálnej polohe.
Počnúc position: relativea pre všetky nestatické polohyhodnoty, dokážeme zmeniť predvolenú pozíciu prvku pomocou pomocných vlastností, ktoré som spomenul vyššie.
Presuňte oranžové políčko vedľa modrého.
.box-orange { position: relative; // We are now ready to move the element background: orange; width: 100px; height: 100px; top: 100px; // 100px from top relative to its old position left: 100px; // 100px from left }
POZNÁMKA: Použitie position: relative pre prvok neovplyvní polohy ostatných prvkov.
3. Absolútne
V position: relativeprvku je umiestnený relatívne k sebe. Avšak absolútne lyumiestnený prvok je relatívny k svojmu rodičovi .
Prvok s position: absoluteje odstránený z normálneho toku dokumentov. Je umiestnený automaticky do východiskového bodu (v ľavom hornom rohu) nadradeného prvku. Ak nemá žiadne nadradené prvky, pôvodný dokument bude nadradený.
Pretože position: absoluteprvok sa odstráni z toku dokumentov, ovplyvnia sa ďalšie prvky, ktoré sa správajú tak, že sa prvok úplne odstráni z webovej stránky.
Pridajme kontajner ako nadradený prvok:
.box-orange { position: absolute; background: orange; width: 100px; height: 100px; }
Teraz to vyzerá, že modrý rámček zmizol, ale nie. Modrá skrinka sa správa ako odstránená oranžová skrinka, takže sa posúva až na miesto oranžovej skrinky.
Presuňte oranžové políčko o 5 pixelov:
.box-orange { position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px; }
Súradnice prvku s absolútnou pozíciou sú relatívne k jeho rodiču, ak má rodič aj nestatickú polohu. V opačnom prípade vlastnosti pomocníka umiestnia prvok vzhľadom k počiatočnému.
.container { position: relative; background: lightgray; } .box-orange { position: absolute; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }
4. Opravené
Rovnako tak position: absolutesú z normálneho toku dokumentov odstránené aj pevne umiestnené prvky. Rozdiely sú:
- Vzťahujú sa iba na tento dokument, nie na iných rodičov.
- Rolovanie na nich nemá vplyv .
.container { position: relative; background: lightgray; } .box-orange { position: fixed; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }Tu v príklade zmením pozíciu oranžovej skrinky na pevnú a tentokrát je to relatívnych 5 pixlov napravo od, nie jeho rodič (kontajner) :
As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.
5. Sticky
position: sticky can be explained as a mix of position: relative and position: fixed.
It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:
IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. You can check the browser support at caniuse.com.
The best way to understand the CSS Position Property is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.
Ak sa chcete dozvedieť viac o vývoji webu, neváhajte ma sledovať na Youtube !
Ďakujem za čítanie!
