Pozícia - Triky CSS | Almanach CSS 2025

positionNehnuteľnosť vám pomôžu manipulovať umiestnenie prvku, napríklad:

.element ( position: relative; top: 20px; )

Vzhľadom na svoju pôvodnú pozíciu bude prvok hore teraz posunutý zhora o 20 pixlov. Ak by sme mali animovať tieto vlastnosti, môžeme vidieť, koľko kontroly nám to dáva (aj keď to z dôvodu výkonu nie je dobrý nápad):

relativeje iba jednou zo šiestich hodnôt positionvlastnosti. Tu sú ďalšie:

Hodnoty

static: každý prvok má predvolene statickú polohu, takže sa bude držať normálneho toku stránok. Takže ak je nastavený index zľava / doprava / zhora / zdola / z, nebude to mať na tento prvok žiadny vplyv.
relative: pôvodná poloha prvku zostáva v toku dokumentu, rovnako ako statichodnota. Teraz však bude fungovať ľavý / pravý / horný / dolný / z-index. Pozičné vlastnosti „posúvajú“ prvok z pôvodnej polohy v tomto smere.
absolute: prvok je odstránený z toku dokumentu a ostatné prvky sa budú správať, akoby tam ani neboli, zatiaľ čo všetky ostatné pozičné vlastnosti budú na ňom fungovať.
fixed: prvok je odstránený z toku dokumentu ako absolútne umiestnené prvky. V skutočnosti sa správajú takmer rovnako, iba pevné umiestnené prvky sú vždy relatívne k dokumentu, nie je to žiadny konkrétny rodič, a rolovanie ich neovplyvní.
sticky(experimentálne): s prvkom sa zaobchádza ako s relativehodnotou, kým umiestnenie výrezu vo výreze nedosiahne stanovenú prahovú hodnotu. V takom prípade prvok zaujme fixedpozíciu, v ktorej sa má držať.
inherit: positionhodnota nekaskáduje, takže ju možno použiť na jej konkrétne vynútenie a inherithodnotu polohy od jej rodiča.

Absolútne

Ak má podradený prvok absolutehodnotu, nadradený prvok sa bude správať, akoby tam dieťa vôbec nebolo:

.element ( position: absolute; )

A keď sa snažíme nastaviť iné hodnoty, ako je left, bottoma rightzistíme, že dieťa element reaguje nie na rozmery svojej materskej spoločnosti, ale dokument:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Aby bol podradený prvok umiestnený úplne od nadradeného prvku, musíme to nastaviť na samotnom nadradenom prvku:

.parent ( position: relative; )

Teraz vlastnosti, ako je left, right, bottoma topbude odkazovať na rodičovský element, takže ak urobíme dieťa element transparentné, môžeme vidieť, že sedí priamo na dne rodičov:

Opravené

fixedHodnota je podobná absolute, pretože vám môžu pomôcť umiestniť prvok kdekoľvek vzhľadom k dokumentu, avšak táto hodnota nie je ovplyvnená rolovanie. Pozrite sa na podradený prvok v ukážke nižšie a na to, ako sa pri rolovaní naďalej drží v dolnej časti stránky:

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome	Firefox	IE	Hrana	Safari
4	2	7	12	3.1

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Lepkavé

stickyHodnota je ako kompromis medzi relativea fixedhodnotami. Od tohto písania je to v súčasnosti experimentálna hodnota, čo znamená, že nie je súčasťou oficiálnej špecifikácie a vybrané prehliadače ju prijímajú iba čiastočne. Inými slovami, pravdepodobne nie je najlepší nápad použiť to na živej produkčnej webovej stránke.

Čo to robí? Umožňuje vám to umiestniť prvok relatívne k čomukoľvek v dokumente a potom, keď používateľ prejde okolo určitého bodu vo výreze, zafixovať polohu prvku na toto miesto, aby zostal trvalo zobrazený ako prvok s fixedhodnotu.

Vezmite si nasledujúci príklad:

.element ( position: sticky; top: 50px; )

Prvok bude relatívne umiestnený, kým rolovacie miesto výrezu nedosiahne bod, kde bude prvok 50pxz hornej časti výrezu. Na tom mieste, prvok sa stáva lepkavá a zostáva na fixedpozíciu 50pxv hornej časti obrazovky.

Nasledujúca ukážka ilustruje bod, v ktorom je horná navigácia predvolená relativepoloha a druhá navigácia je nastavená stickyna úplnú hornú časť výrezu. Upozorňujeme, že ukážka bude v čase písania tohto článku fungovať iba v prehliadačoch Chrome, Safari a Opera.

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.