Position: fixed

Kromě zafixování elementu na stránce:

div.fixovany {
  position: fixed;
}

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.

Ukázka

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%;
}

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Fixní menu při scrollování

Fixní menu při rolování

Jak při odrolování stránky zafixovat menu na horní hraně obrazovky.

Odkaz na kotvu a fixní menu

Odkaz na kotvu a fixní hlavička

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

Jak funguje position: sticky

Jak funguje CSS position: sticky

CSS sticky posice umožňuje bez JS zafixovat element ke kraji okna při rolování.

Fixní postranní panel

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

Proč nepoužívat fixní hlavičku

Proč nepoužívat fixní hlavičku

Proč se vyhnout fixování záhlaví/menu k hornímu okraji obrazovky.

Komentáře