Pozice - Triky CSS | Almanach CSS 2025

positionNemovitost vám pomohou manipulovat umístění prvku, například:

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

Ve srovnání s původní pozicí bude prvek výše posunut dolů o 20 pixelů dolů. Pokud bychom měli animovat tyto vlastnosti, můžeme vidět, kolik nám to dává kontrolu (i když to není dobrý nápad z důvodů výkonu):

relativeje pouze jednou ze šesti hodnot positionvlastnosti. Zde jsou ostatní:

Hodnoty

static: každý prvek má ve výchozím nastavení statickou polohu, takže se prvek bude držet normálního toku stránky. Pokud je tedy nastaven levý / pravý / horní / dolní / z-index, nebude na tento prvek mít žádný vliv.
relative: původní poloha prvku zůstane v toku dokumentu, stejně jako statichodnota. Ale nyní bude fungovat levý / pravý / horní / dolní / z-index. Poziční vlastnosti „posunou“ prvek z původní polohy v tomto směru.
absolute: prvek je odebrán z toku dokumentu a ostatní prvky se budou chovat, jako by tam ani nebyly, zatímco na něm budou fungovat všechny ostatní poziční vlastnosti.
fixed: prvek je odstraněn z toku dokumentu jako absolutně umístěné prvky. Ve skutečnosti se chovají téměř stejně, pouze pevně umístěné prvky jsou vždy relativní k dokumentu, nikoli k žádnému konkrétnímu rodiči, a nejsou ovlivněny posouváním.
sticky(experimentální): s prvkem se zachází jako s relativehodnotou, dokud umístění výřezu ve výřezu nedosáhne zadané prahové hodnoty, přičemž v tomto okamžiku prvek zaujme fixedpozici, kde se říká, že se má držet.
inherit: positionhodnota nekaskáduje, takže ji lze použít k jejímu specifickému vynucení a inheritk poziční hodnotě od jejího rodiče.

Absolutní

Pokud má podřízený prvek absolutehodnotu, bude se nadřazený prvek chovat, jako by tam dítě vůbec nebylo:

.element ( position: absolute; )

A když se snažíme nastavit jiné hodnoty, jako je left, bottoma rightzjistíme, že dítě element reaguje nikoli na rozměry své mateřské společnosti, ale dokument:

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

Aby byl podřízený prvek umístěn absolutně od svého nadřazeného prvku, musíme to nastavit na samotném nadřazeném prvku:

.parent ( position: relative; )

Nyní vlastnosti, jako je left, right, bottoma topbude odkazovat na rodičovský element, takže pokud uděláme dítě element transparentní, můžeme vidět, že sedí přímo na dně rodiče:

Pevný

fixedHodnota je podobná absolute, protože vám mohou pomoci umístit prvek kdekoliv vzhledem k dokumentu, ovšem tato hodnota není ovlivněna rolování. Podívejte se na podřízený prvek v ukázce níže a na to, jak se po rolování nadále drží na konci stránky:

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome	Firefox	TJ	Okraj	Safari
4	2	7	12	3.1

Mobilní / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Lepkavý

stickyHodnota je jako kompromis mezi relativea fixedhodnotami. V době psaní tohoto článku je to v současné době experimentální hodnota, což znamená, že není součástí oficiálních specifikací a je pouze částečně přijato vybranými prohlížeči. Jinými slovy, pravděpodobně to není nejlepší nápad použít to na živém produkčním webu.

Co to dělá? Umožňuje vám umístit prvek vzhledem k čemukoli v dokumentu a poté, co uživatel roloval kolem určitého bodu ve výřezu, zafixujte polohu prvku na dané místo, aby zůstal trvale zobrazen jako prvek s fixedhodnota.

Vezměte následující příklad:

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

Prvek bude relativně umístěn, dokud místo posouvání výřezu nedosáhne bodu, kde bude prvek 50pxz horní části výřezu. Na tom místě, prvek se stává lepkavá a zůstává na fixedpozici 50pxv horní části obrazovky.

Následující ukázka ilustruje ten bod, kde je horní navigace výchozí relativeumístění a druhá navigace je nastavena stickyna úplně nahoře ve výřezu. Upozorňujeme, že demo bude v době psaní tohoto článku fungovat pouze v prohlížečích Chrome, Safari a Opera.

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.