Zafixovaná pozice

Mohli jste si všimnout, že prvek s absolutní (absolute) pozicí (position) je ignorován ostatními prvky a když pohneme stránkou, tak se pohybuje stejně jako ostatní prvky.

Co když chceme aby prvek zůstal na stejném místě i přes to že pohneme se stránkou? Použijeme zafixovanou (fixed) pozici (position).

.navbar {
	position: fixed;
	left: 0px;
	top: 0px;
}

Toto by zafixovalo prvek se třídou navbar nalevo nahoru obrazovky nezávisle na pohnutí stránkou.

Zafixovaná pozice se nejčastěji používá u navigačních barů navrchu webové stránky, aby byl viditelný nezávisle na posunutí stránky.

Pokyny

Zkuste posunout stránkou nahoru a dolů a všimněte si, že červený čtverec se hýbe při posunutí stránky stejně jako ostatní prvky. Po vyzkoušení stiskněte Spustit.

Zaměňte pozici prvku (position) s id ctverec2 (#ctverec2) z absolutní (absolute) na zafixovanou (fixed), jinak ho ponechte stejný.

Nyní zkuste pohnout stránkou a všimněte si, že červený čtverec zůstává na stejné pozici na obrazovce nezávisle na posunutí stránkou.

Začněte programovat zdarma

8/10