css útmutató

előző ◈ a következő

Tulajdonság CSS z-index határozza meg a sorrendben az elemek, amikor egymásra pozícionálásnál. Azaz, a segítségével ez megadhatja, hogy melyik elem (réteg) lesz a tetején, és mi (és milyen sorrendben) alatta.

Elemek különböző tulajdonság értéke z-index.

css útmutató

De ez nem olyan egyszerű. Ez a tulajdonság a CSS egyike azon kevés, hogy készítsen csak két nagyon különböző funkciók (pl pozíció):

  1. z-index tulajdonság szervezni elemek elhelyezve.
  2. Mindegyik elem z-index nem egyenlő az automatikus létrehoz egy új rendelés, amelyre vonatkozóan azt (rendelési) akkor annak minden gyerekeknek (természetesen leszármazottai, akiknek z-index nem egyenlő az automatikus létrehozása már rendelési szint). Ezért például rendelés egy elemet az egyik szinten nem lehet „tenni” a két elem között a többi.
  3. A gyökér elem Ez megteremti a gyökér szintű rendelés, akkor is, ha ő nincs megadva z-index.

Nézzünk egy példát:

Ebben a példában minden numerikus z-index értéke akkor kell cserélni csak DIV3 és DIV4. De nem értem a következőket:

  1. Nem kap tegye DIV3 és DIV4 alatt DIV2, mivel a különböző szinteken a rendelés. DIV2 létre DIV1 elem és DIV3 és DIV4 a DIV2 létre. Hogy azok ugyanazon a szinten van szükség, hogy távolítsa el a z-index DIV2 vagy állítsd auto.
  2. Nem kap alá DIV2 DIV1. Ahhoz, hogy a szükséges automatikus beállítás már DIV1.
  3. És így tovább.

A különböző könyvek és referenciák a „szekvenálás szint” különbözőképpen hívják - a helyi stacking összefüggésben a helyi környezet verem, stb A hivatalos leírás CSS van írva, - «helyi felhalmozás összefüggésben». De véleményem szerint az „szintű rendelés” közelebb a megértéshez a legtöbb orosz nyelvű ember, így én be ezt a meghatározást.

ingatlan típusa

Alkalmazható: elemek egy más helyzetben, mint a statikus.

Az ingatlan értéke z-index azt jelzi, a sorrendben a terméket az alábbi módokon.

  • Száma - bármilyen egész pozitív vagy negatív szám, amely képviseli az elemek sorrendje egy adott rendelési szinten. Egy elem egy nagyobb érték lesz található a tetején azok, amelyek ennél kisebb. Ha két elem azonos értékű, akkor a felső lesz az, amely alacsonyabb a HTML-kódot. Ezen túlmenően, egy elem, amelynek egy numerikus értéket (beleértve a 0) létrehoz egy új szintjét elrendelő elhelyezve leszármazottai.
  • auto - ahol egy elem a jelenlegi szintje rendelési ugyanaz z-index. mint őse, aki létrehozta ezt a szintet. Ebben az esetben az elem önmagában nem hoz létre egy új szintjét szervező utódaik. Ha több elem van az adott értéket, akkor a felső lesz az, amely áll alacsonyabb a HTML kódot az oldal.
  • öröklik - örökli z-index értéke a szülő elem.

Érdeklődjön venni: nem léteznek.

Alapértelmezett érték: auto.

Mivel a belső elem generáló rendelési szint nem csak elhelyezni elemeket, hanem bármely más böngésző a különleges szabályait rétegződés belül ezen a szinten:

  1. Az első réteg egymásra háttér és a keret elem, amely létrehozta a szervező szinten.
  2. Felülről, a második réteg egymásra leszármazottja elemet, amelyeknek negatív értékei z-index. ahol a fenti egy eleme, amelynek értéke közelebb a nullához.
  3. A következő réteg a gyermek elemek, amelyek nem integrált (inline).
  4. Az negyedik réteg úszó elemek (float), tartalmával együtt.
  5. Ötödik réteg - ez az integrált gyermek elemek.
  6. Hatodik réteg elemek egymásra z-index automatikus vagy 0, ahol a fenti tag áll az alábbi kódot.
  7. És végül, a tetején elrendezett elemek pozitív értékei z-index. ahol a fenti egy eleme, amelynek nagyobb értéket.

z-index: auto | szám | örököl

Példa CSS: használja z-index

Eredmény. Használati tulajdonságai CSS z-index.

css útmutató

Internet Explorer 6.0 és 7.0 nem értik az értéket örökli. Szintén ezek a böngészők új szintjét rendelés általában minden pozicionált elemek nem csak numerikus értékeket z-index.

IE 6.0 mindig van egy olyan eleme