Umístění prvků na webové stránce je jednou z důležitých funkcí vývoje webu. Umožňuje přesné uspořádání prvků a vytvoření požadované kompozice, aby stránka vypadala esteticky a pohodlně. Pro tento účel existuje několik typů polohování, nejběžnější jsou position: fixed a position: absolute.
Position: fixed určuje absolutní umístění položky vzhledem k zobrazenému okně. Prvek s touto vlastností zůstává na pevné pozici i při posouvání webové stránky. Obvykle se používá k vytvoření pevné navigace nebo postranního panelu, který je uživateli vždy viditelný.
Například, rolování stránky dolů, prvek s position: fixed zůstane na místě. To vám umožní vytvářet uživatelsky přívětivá a funkční rozhraní, kde je navigační panel vždy k dispozici a nevyžaduje neustálé posouvání stránky.
Position: absolute určuje absolutní umístění prvku vzhledem k jeho nejbližšímu umístěnému rodiči. Pokud umístěný rodič chybí, položka je umístěna vzhledem k zobrazenému okně. To vám umožní přesně spravovat umístění prvků na stránce a vytvářet složité kompozice.
Například, položka s position: absolute bude umístěna v dané poloze uvnitř nadřazené jednotky, i když se okno zobrazení změní nebo se provede posouvání stránky. To je zvláště užitečné, když je třeba umístit prvky do složité kompozice, jako je vytvoření zásobníku map nebo galerie obrázků.
Rozdíl mezi position fixed a absolute
Hlavní rozdíl mezi position fixed a absolute je v tom, že fixed zachycuje prvek vzhledem k oknu prohlížeče, zatímco absolute zachycuje prvek vzhledem k nejbližšímu polohovanému (nikoli statickému) nadřazenému kontejneru.
Když je položce přiřazena hodnota position fixed, její pozice je určena vzhledem k okně prohlížeče, bez ohledu na posouvání stránky. To znamená, že prvek zůstane na svém místě, i když uživatel posouvá stránku dolů nebo nahoru. To se často používá k vytvoření" připnutých " položek, jako je pevná navigační nabídka nebo čepice webu.
Na druhou stranu hodnota position absolute určuje pozici prvku vzhledem k nejbližšímu polohovanému (ne statickému) nadřazenému kontejneru. Pokud takový kontejner neexistuje, bude pozice relativní k samotnému okně prohlížeče, stejně jako u fixed. To vám umožní umístit položky kamkoli na stránku a libovolně změnit jejich pozici, když změníte velikost prohlížeče nebo posouváte stránku.
Navíc položky s polohováním fixed jsou vždy " nad " prvky s position absolute. To znamená, že položky s fixed se zobrazí nad ostatními položkami na stránce, což může být užitečné pro vytváření vyskakovacích oken nebo modálních oken.
Hlavní rozdíly a aplikace
Position fixed umožňuje uzamknout položku vzhledem k zobrazenému okně, to znamená, že při procházení stránky zůstane na jednom místě. Tato položka se zobrazí nad všemi ostatními prvky a její pozice je nastavena pomocí vlastností top, right, bottom a left. Užitečné použití position fixed Chcete-li vytvořit navigační panely, záhlaví nebo bannery, které musí být uživateli vždy viditelné.
Position absolute umožňuje, aby byl prvek absolutně umístěn ve vztahu k nejbližšímu umístěnému nadřazenému prvku. Pokud takový rodičovský prvek neexistuje, pak pozičním prvkem bude stránka. Prvky s pozicí absolute jsou odstraněny z normálního toku dokumentu a nemají vliv na umístění jiných prvků. Tento typ umístění je užitečný pro vytváření posuvníků, vyskakovacích oken nebo jiných prvků, které by měly být přesně umístěny na konkrétním místě stránky.