Css z-index - vagyis

CSS z-index felelős, amely elem fölött található / az alábbiakban alkalmazva. Más szavakkal, egy adott elem átfedi a másikat. Ez a funkció csak akkor működik, az elemek, amelyek a pozíciót érték van beállítva, mint:

  • helyzetbe. abszolút;
  • positionn. rögzített;
  • positionn. relatív;

Szintaxis CSS z-index

A szám megadja, hogy pontosan milyen szinten lesz található elem. Minél nagyobb a szám, annál magasabb réteg. Előfordul, hogy a z-index is nevezik a harmadik dimenzióban. Ha elképzeljük a háromdimenziós térben, ez egy overlay nézne:

Css z-index - vagyis

Automatikus érték azt jelenti, hogy a böngésző melyik blokk milyen szinten. Érték öröklés azt örökli a szülőtől (ős).

Ahogy felülíró egy blokk egy másik

1. példa szuperponált négyzetek z-index

Az első példában, úgy véljük, a legegyszerűbb lehetőség, hogy blokkolja ellensúlyozza az árrés, hogy elérjék a burkolat. Felhívjuk figyelmét, hogy az összes jelenlegi ingatlan position: relative.

Az oldalon alakítjuk a következő

Most minden új blokk z-index egy nagyobb (block1 - 1, block2 - 2, block3 - 3, block4 - 4, block5 - 5). Sorrendjének módosítása z-index ebben a példában a következők szerint:

Az oldalon alakítjuk a következő

Ebben a példában block4 én mindenekelőtt azért, mert annak z-index nagyobb, mint a többi (5). Hangsúlyozzuk ismét, hogy ha kiveszi a helyzet: a relatív. akkor ez felülírja az z-index.