CSS Academy · Lektion

Z-index og stacking context

Styr, hvilke elementer der vises øverst, med z-index, og forstå stacking contexts.

Lektion 4 af 413 trin

Z-index og stacking context er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad er z-index?

z-index styrer stablingsrækkefølgen for positionerede elementer langs Z-aksen (forfra og bagud). Højere værdier vises oven på lavere værdier, når elementer overlapper.

z-index virker kun på positionerede elementer

z-index har ingen effekt på elementer med position: static (standardindstillingen). Du skal bruge relative, absolute, fixed eller sticky, for at z-index kan anvendes.

<div class="popup">Popup (position + z-index)</div>

Standardrækkefølge for lag

Uden en eksplicit z-index placeres elementerne i denne rækkefølge (bagfra og frem):

Rodelementets baggrund
Elementer på blokniveau (i flowrækkefølge)
Flydende elementer
Inline-elementer
Positionerede elementer med z-index: auto eller 0

Stablingskontekst

En stablingskontekst er et lag af elementer med en fælles z-akse. Z-index-værdier konkurrerer kun inden for den samme stablingskontekst. Et element i en stablingskontekst kan ikke placeres over elementer uden for den, uanset z-index-værdien.

Hvad opretter en stablingskontekst?

En ny stablingskontekst oprettes af:

position + z-index forskellig fra auto
opacity mindre end 1
transform, filter eller perspective anvendt
will-change på bestemte egenskaber
isolation: isolate
Flex- og gitterbørn med z-index

Isolering af stablingskontekst

Brug isolation: isolate til bevidst at oprette en stablingskontekst uden visuelle bivirkninger. Det er nyttigt til brugergrænsefladekomponenter, der skal indeholde deres egne z-index-lag.

<div class="modal-wrapper">Isolated stacking context</div>

Problemet med z-index-skalaen

Projekter lider ofte under "z-index-krige", hvor udviklere konkurrerer ved at hæve værdierne til 9999 eller 99999. Løs problemet med en navngiven z-index-skala ved hjælp af CSS-variabler:

<p>Custom properties define a z-index scale used across the app.</p>

Negativ z-index

Negative z-index-værdier placerer elementer bag den omsluttende blok's baggrund. Det kan bruges til dekorative pseudo-elementlag, der placeres bag indholdet.

<div class="card">Card with a decorative gradient layer behind it</div>

Fejlfinding af stablingsproblemer

Når en modal eller et værktøjstip vises bag et andet element, skyldes det som regel en stablingskontekst på et overordnet element med en lav z-index. Brug DevTools' 3D-visning, eller kontrollér opacity, transform og filter på de overordnede elementer.

z-index i Flex og Grid

Flex- og gitterelementer kan bruge z-index direkte uden eksplicit at angive position. Browseren behandler dem som positionerede med henblik på stabling.

<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>

Faste modaler og z-index

Modale vinduer bør være direkte børn af <body> (eller en wrapper på øverste niveau), så de undgår overordnede stablingskontekster. HTML-elementet <dialog> håndterer dette indbygget i browserens øverste lag.

Hurtigt tjek

To overlappende elementer har begge z-index: 100 i forskellige overordnede stablingskontekster. Hvad afgør, hvilket element der vises øverst?

Besvar den i den interaktive lektion

Opsummering

z-index styrer stablingen af positionerede elementer forfra og bagud. Stablingskontekster isolerer konkurrencen mellem z-index-værdier. Alt, der opretter en stablingskontekst på et overordnet element, kan fastholde underordnede z-index-værdier. Brug isolation: isolate til at oprette tydelige grænser og CSS-variabler til en z-index-skala.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Z-index og stacking context” gratis?

Ja — hele teksten til “Z-index og stacking context” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Z-index og stacking context”?

Styr, hvilke elementer der vises øverst, med z-index, og forstå stacking contexts. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Z-index og stacking context”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Statisk og relativ positionering
Absolut positionering og containing block
Fixed og sticky positionering
Z-index og stacking context

← Tilbage til CSS Academy