Plovoucí Tlačítka: Design a Umístění
Praktický návod na tvorbu floating action buttonů. Naučte se správné umístění…
Fixní Záhlaví: Základy a Implementace
Jak vytvořit záhlaví, které zůstane viditelné při scrollování. Pokrývá CSS position: fixed a moderní přístupy se sticky.
Co jsou fixní záhlaví a proč je potřebujete
Fixní záhlaví jsou jedním z nejdůležitějších prvků moderního webdesignu. Zůstávají viditelná, když uživatel scrolluje po stránce — to znamená, že navigace, vyhledávání nebo důležitá tlačítka jsou vždy dostupné. Není třeba scrollovat zpět nahoru.
Existují dva hlavní přístupy: tradiční
position: fixed
a novější
position: sticky
. Každý má své výhody. Sticky je flexibilnější, fixed je jednodušší. Naučíme se, kdy použít který přístup.
V tomto průvodci si projdeme praktické příklady, běžné problémy a jak je řešit. Pochopíte, jak správně spravovat vrstvení prvků (z-index), aby se vám elementy nepřekrývaly.
Klíčové pojmy
- Position: fixed — prvek se drží na místě relativně k oknu prohlížeče
- Position: sticky — prvek se chová normálně, pak se přilepí při scrollování
- Z-index — řídí, který prvek se zobrazuje nahoře
- Viewport — viditelná část stránky v prohlížeči
Position: Fixed — Tradiční přístup
CSS vlastnost
position: fixed
připevňuje prvek na místo v okně prohlížeče. Když uživatel scrolluje, prvek se nepohybuje — zůstává tam, kde jste ho umístili.
To je užitečné pro záhlaví, která se mají zobrazovat vždy. Zde je jednoduchý příklad:
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: white;
padding: 1rem 2rem;
}
Vlastnosti
top: 0; left: 0; right: 0
umístí záhlaví na horní край a natáhnou ho přes celou šířku. Používáme
z-index: 100
, aby se záhlaví zobrazilo nad ostatním obsahem.
Velké rozlišení, malé rozlišení — fixed záhlaví vždy funguje stejně. Je to spolehlivé řešení, které není závislé na obsahu stránky. Jen si dejte pozor: fixní prvky zabírají místo v okně, takže obsah stránky se neměl překrývat s záhlavím. Proto přidáte
margin-top
do těla dokumentu.
Position: Sticky — Modernější řešení
CSS vlastnost
position: sticky
je novější a flexibilnější. Prvek se chová normálně, dokud se nedosáhne určitého místa — pak se “přilepí”.
Sticky je chytré. Funguje relativně k rodiči prvku, ne k oknu prohlížeče. To znamená, že když dojdete na konec nadřazeného prvku, sticky prvek se přestane “lepit” a poroste dál s obsahem.
nav {
position: sticky;
top: 0;
z-index: 50;
background: white;
padding: 1rem 2rem;
}
Vidíte rozdíl? Sticky používáme stejně jako fixed, ale chování je jiné. Prvek se “přilepí” na top: 0, ale jen do té doby, než opustíte jeho nadřazený prvek. Je to přirozenější — funguje s obsahem, ne proti němu.
Sticky se nemusí bát překrytí, protože není pevně fixované. Je to oblíbená volba pro navigační menu, protože se přirozeně chová s obsahem stránky. Všechny moderní prohlížeče sticky podporují — není třeba se bát starých verzí.
Poznámka k kompatibilitě
Obsah v tomto průvodci je zaměřen na edukaci a pochopení CSS pozicování. Sticky pozicování je plně podporováno všemi moderními prohlížeči (Chrome 56+, Firefox 59+, Safari 13+). Pokud máte staré uživatele na Internet Exploreru 11 a starším, budete muset použít fallback nebo polyfill. Pro starší prohlížeče vždy funguje position: fixed.
Správa Z-Index a Vrstvení
Když máte více fixních prvků (záhlaví, postranní panel, plovoucí tlačítko), musíte řídit, který prvek se zobrazuje nahoře. To je práce z-index vlastnosti.
Z-index funguje jako vrstva. Vyšší číslo znamená víc nahoru. Ale není to jednoduché — z-index funguje jen mezi prvky, které mají stejný context (rodiče). Pokud máte vnořené prvky s různými rodiči, můžou se chovat divně.
header { z-index: 1000; }
sidebar { z-index: 100; }
floating-button { z-index: 999; }
modal { z-index: 2000; }
Doporučujeme systém: standardní prvky 0-99, sidebar a pevné prvky 100-999, modální dialogy a popup 2000+. Takhle se vyhnete konfliktům. Nevyužívejte příliš vysoká čísla — z-index nemusí být 999999. Číslo 1000-2000 je dostačující.
Problém nastane, když má prvek
position: fixed
a rodiče s nižším z-index. Pak se fixní prvek nebude zobrazovat nad ostatním obsahem. Řešení: buď zvýšíte z-index rodiče, nebo přesunete fixní prvek na vyšší úroveň HTML stromu.
Praktické tipy a nejčastější chyby
Chyba: Zapomenutý z-index
Když přidáte position: fixed, musíte přidat i z-index. Bez něj se prvek může zobrazit pod ostatním obsahem. Vždy přidejte z-index — třeba jen z-index: 1.
Chyba: Překrývající se obsah
Fixní záhlaví zabírá místo. Když nezapočítáte jeho výšku, obsah se překryje. Řešení: přidejte margin-top nebo padding-top do těla stránky, které odpovídá výšce záhlaví.
Tip: Sticky je lepší, když to jde
Sticky pozicování se chová přirozeněji. Zkuste ho nejdříve. Fixed použijte jen když opravdu potřebujete prvek, který se nikdy nepohne — třeba floating tlačítko v rohu.
Tip: Testujte na mobilech
Fixní záhlaví na mobilu zabírá hromadu místa. Na telefonech s malým displejem to může znepříjemňovat prohlížení. Zvažte, zda je záhlaví na mobilu potřeba, nebo ho skryjte.
Tip: Animace při scrollování
Záhlaví se dá skrýt při scrollování dolů a znovu zobrazit při scrollování nahoru. To šetří místo. Potřebujete JavaScript — sledujte scroll pozici a přidávejte CSS třídu.
Tip: Box-shadow pro oddělení
Fixní záhlaví se snadněji čte, když má stín pod sebou. Přidejte
box-shadow: 0 2px 4px rgba(0,0,0,0.1)
— hned to vypadá lépe.
Závěr: Vyberte správný přístup
Fixní a sticky záhlaví jsou mocné nástroje pro zlepšení uživatelského zážitku. Nejsou těžké na implementaci — je to jen CSS. Ale jsou věci, které je dobré znát.
Sticky je jednoduchý volba pro většinu případů. Je přirozený, pracuje s obsahem, a uživatelé ho milují. Fixed používejte jen když opravdu potřebujete prvek, který se nikdy nepohne. A pamatujte na z-index — bez něj se prvky překrývají nečekaně.
V příštích částech se podíváme na plovoucí tlačítka (floating action buttons) a postranní panely, které sledují čtenáře. Ty jsou dalším krokem v tvorbě interaktivních webů. Teď už znáte základy — zbývá jen praktika.
Chcete se dozvědět víc?
Prozkoumejte další články z kategorie Přilepené prvky a naučte se pokročilé techniky.
Prohlédnout další články
Související články
