position určuje, jak se prvek umístí a zda se aplikují offsetové vlastnosti (top/right/bottom/left).
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute umístí prvek relativně k jeho nejbližšímu pozicionovanému předchůdci (cokoliv jiného než static). Takže nastavíte position: relative na rodičovský prvek, abyste z něj udělali referenční bod:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
Tento vzor relative-parent / absolute-child je všude: badges, dropdowns, tooltips, tlačítka zavření.
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0), pak zůstane na místě, pokud je jeho kontejner v zobrazení — skvělé pro záhlaví sekcí.Prvky absolute/fixed jsou odstraněny z normálního toku, takže si nereservují místo — sourozenecké prvky se chovají, jako by tam nebyly, což může způsobit překrytí. Naplánujte na to (např. přidejte padding jako kompenzaci pro fixed navbar).
position je nezbytná pro overlays, sticky headers, modals, dropdowns a badges.
Vztah relative-parent/absolute-child a rozdíl mezi fixed a sticky jsou praktické jádro, které používáte neustále.