Moderní tvorba webových aplikací

O webu

Position: fixed

Různé způsoby využití fixované posice v CSS.

2 minuty

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

Související články

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

12 minut

Možnosti stylování <iframe>

Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.

10 minut

Zvýraznění aktivní sekce při rolování

Moderní způsoby zvýraznění aktivní položky navigace podle aktuální sekce – CSS i IntersectionObserver.

5 minut

CSS funkce random()

Jak v CSS generovat náhodné hodnoty pomocí random() a kdy ji použít.

6 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025