Z-indeks i CSS: Hvad det er, og hvad det gør

Hvad er et Z-indeks?

Z Index ( z-index) er en CSS-egenskab, der definerer rækkefølgen af ​​overlappende HTML-elementer. Elementer med et højere indeks placeres oven på elementer med et lavere indeks.

Bemærk : Z indeks fungerer kun på placerede elementer (position:absolute,position:relativeellerposition:fixed).

Mulige værdier

/* Default value if not specified */ z-index: auto; /* Integer values */ z-index: 1; z-index: 100; z-index: 9999; z-index: -1; /* Global values */ z-index: inherit; z-index: initial; z-index: unset;

Sådan bruges Z-indekset

I dette eksempel kan du se tre felter, der vises oven på hinanden i forskellige ordrer ved hjælp af z-index.

HTML

CSS

#blue { background-color: blue; } #red { background-color: red; } #green { background-color: green; }

Da den z-indexikke var defineret, har den en standardværdi på auto. Dette er et resultat:

Et billede af tre kasser

Prøv at ændre rækkefølgen til Grøn, Blå, Rød i CSS ved hjælp af z-index.

#blue { background-color: blue; z-index: 2; } #red { background-color: red; z-index: 1; } #green { background-color: green; z-index: 3; }

Dit resultat bliver:

Et billede af tre kasser

Brug Z Index, hvis du har brug for at placere et baggrundselement under en container. Du kan nemt placere baggrunden under hvert element ved at give den et negativt Z-indeks som nedenfor:

#background { z-index: -1; }