z-index

Lastnost z-index določa skladovni red za skupino elementov, katerih koordinate x in y se prekrivajo.

Elementi lahko imajo 3 dimenzije. x in y koordinati določata pozicijo elementa, kot je viden na ekranu. Z koordinata pa določa, kateri element bo nad drugimi, oz. obratno, kateri bo pod drugimi.

Pri uporabi relativnega, absolutnega in fiksnega pozicioniranja lahko pride do prekrivanja posameznih elementov. Z uporabo lastnosti z-index lahko določimo, kako so elementi naloženi eden preko drugega.

Vrednost te lastnosti je lahko poljubno celo število ali ključna beseda auto. Pri uporabi celih števil je element z manjšim indeksom pod elementom z večjim indeksom (če sta oba vsebovana v istem elementu). Pri uporabi ključne besede auto, pa se elementi nalagajo v takem vrstnem redu, kot nastopajo v datoteki HTML.

Negativni indeks pomeni, da se bo element pojavil pod elementom, v katerem je vsebovan.

Lastnost z-index uporablja pozitivno celo število za določevanje v kateri poziciji v skladovnem redu ali z-redu je plast. Plast, ki ima z-index 1, bo pod plastmi z večjimi vrednostmi z-index, to pomeni, da večja kot bo vrednost z-index, višje bo plast v z-skladu. To določa prednost, ki jo plast ima, kar avtomatsko nadzoruje vidnost vsebine plasti, ko na primer 2 plasti zavzemata isti prostor.

Ko nastavite plasti, da zasedajo isti prostor, po navadi nastavljate vse, vendar razen ene, da bodo začetno skrite. Potem se uporabi JavaScript za manipulacijo z njimi ali dovoli uporabniku, da dinamično določa prikaz strani. Večinoma so plasti v skladu tako, kot so napisane v kodi. Prva plast v kodi je na dnu z-sklada, naslednja je na naslednjem mestu... Z uporabo z-index lastnosti lahko to določamo po svojih željah.

Vendar to ne deluje za skladovnini red med gnezdenimi plastmi in njihovimi zgornjimi plastmi, ampak le v nižjih plasteh, ki so v višjih.

vrednost	opis	NN	IE	CSS
auto	Auto vrednost določi ugnezdenim elementom številko na vrednost, ki jo ima višji element	6	4	2
število	Številčna vrednost je lahko nič, pozitivni ali negativno celo število. To določi lokalni skladovni red. Element z višjo številko bo pred elementi z nižjimi številkami	6	4	2

Primer

#logo
{
position: absolute;
left: 0.5in;
top: 0.5in;
z-index: 45;
}

→ Primera pozicioniranja v smeri z, sprememba z-index z JavaScript

Gor e-gradiva CSS primeri vertical-align height/width

SERŠ Maribor : Strokovna gimnazija : 2004 : Matej Vogrinčič

e-gradiva	HTML	CSS	JavaScript	Načrtovanje

			SERŠ Maribor		Iskanje	Primeri