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?

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.

Selektory :first-child a :last-child

Selektory :first-child a :last-child

Pro zaměření první/poslední položky v CSS lze místo přidávání tříd použít :first/last-child.

Komentáře