Kromě zafixování elementu na stránce:
div.fixovany {
position: fixed;
}Má position: fixed ještě jedno zajímavé využití.
Pro fixně umístěný element není možné vytvořit vlastní rámec, jako to jde při posicování absolutním. Rodiči absolutně umístěného prvku se přidá position: relative, čímž se vynulují souřadnice pro následné absolutní posicování. Tohle pro fixed nefunguje.
Fixní element má nulový bod souřadnic vždy v levém horním okraji stránky a nejde změnit. Mimochodem, tento bod není určen ani elementem <body> a ani elementem <html>, nemá na něj vliv žádný margin nebo padding, zkrátka nic.
Popsané chování někdy může vadit, ale také je v určitých případech velmi výhodné. Zvlášť u vytváření universálních JavaScriptů typu lightboxů nám position: fixed hezky zaručí, že se náš skript nerozbije při stylování značky <body> a podobně.
Vytvořit element přesně překrývající celou stránku je potom otázkou prostého:
.presCelouStranku {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.