Z indeksas CSS: kas tai yra ir ką veikia

Kas yra Z indeksas?

„Z Index“ z-index) yra CSS ypatybė, apibrėžianti sutampančių HTML elementų tvarką. Didesnio indekso elementai bus dedami ant elementų, kurių indeksas yra mažesnis.

Pastaba : Z indeksas veikia tik išdėstyti elementų (position:absolute,position:relative, arbaposition:fixed).

Galimos vertybės

/* 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;

Kaip naudotis Z indeksu

Šiame pavyzdyje galite matyti tris langelius, rodomus vienas ant kito skirtingomis tvarka z-index.

HTML

CSS

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

Kadangi z-indexnebuvo apibrėžta, numatytoji reikšmė bus auto. Tai rezultatas:

Trijų dėžučių vaizdas

Pabandykite pakeisti CSS tvarką į žalia, mėlyna, raudona naudojant CSS z-index.

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

Jūsų rezultatas bus:

Trijų dėžučių vaizdas

Jei norite įdėti fono elementą po talpykla, naudokite „Z Index“. Galite lengvai įdėti foną po kiekvienu elementu, suteikdami jam neigiamą Z indeksą, kaip nurodyta toliau:

#background { z-index: -1; }