Ostatnio edytowany:

z-index

Autor: Virtual Patriot

Opis właściwości z-index

Za pomocą właściwości z-index możemy określić poziom widoczności interesującego nas elementu HTML. Mowa tu o elemencie HTML posiadającym każdą inną pozycję tylko nie static.

Dodatkowe techniczne informacje o właściwości z-index

przeznaczenie
  • element HTML posiadający każdą inną pozycję tylko nie static
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie

Interpretacja właściwości z-index

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości z-index

auto

Opis

Wartość auto jest domyślną wartością właściwości z-index.

Domyślnie każdy element HTML posiada ten sam poziom widoczności, który jest oznaczony liczbą 0. Gdy nachodzące na siebie elementy HTML posiadają ten sam poziom widoczności, wtedy bardziej na wierzchu jest ten element HTML, który znajduje się niżej w kodzie HTML.

Domyślnie, gdy jednym z nachodzących na siebie elementów HTML jest element HTML posiadający pozycję inną niż pozycja static, a drugim z nachodzących na siebie elementów HTML jest element HTML posiadający pozycję static oraz gdy nachodzące na siebie elementy HTML są od siebie niezależne (czyli nie są dla siebie nawzajem elementem przodkiem oraz elementem potomkiem), wtedy bardziej na wierzchu jest ten element HTML, który nie posiada pozycji static, chyba że element HTML posiadający pozycję static jest elementem potomkiem innego elementu HTML nieposiadającego pozycji static oraz występującego niżej w kodzie HTML.

Przykład

div#blok-1 (poziom widoczności 0)
div#blok-2 (poziom widoczności 0)
div#blok-3 (poziom widoczności 0)

Wszystkie przykładowe elementy "div" posiadają ten sam domyślny poziom widoczności.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        position:relative;
        padding:1em;
        font-size:1.3em;
      }

      #blok-1 {
        width:350px;
        background-color:red;
      }

      #blok-2 {
        width:300px;
        left:5px;
        bottom:10px;
        background-color:orange;
      }

      #blok-3 {
        width:250px;
        left:10px;
        bottom:20px;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="blok-1">div#blok-1 (poziom widoczności 0)</div>
    <div id="blok-2">div#blok-2 (poziom widoczności 0)</div>
    <div id="blok-3">div#blok-3 (poziom widoczności 0)</div>

  </body>
</html>

liczba całkowita

Opis

Za pomocą właściwości z-index oraz dowolnej liczby całkowitej możemy określić poziom widoczności interesującego nas elementu HTML. Im większa liczba całkowita tym element HTML będzie posiadał większy poziom widoczności.

Każdy element HTML, który posiada właściwość "z-index" wraz z wartością różną od wartości auto tworzy nowy stos elementów HTML, czyli strukturę zbudowaną z siebie oraz ze swoich elementów potomków. Gdy niezależne od siebie stosy elementów HTML nachodzą na siebie, wtedy bardziej na wierzchu jest ten stos elementów HTML, który posiada wyższą wartość właściwości "z-index". Ponadto elementy potomkowie niezależnych od siebie stosów elementów HTML, niezależnie od tego jaką posiadają wartość właściwości "z-index", nachodzą na siebie nawzajem w takiej samej kolejności, jak elementy HTML tworzące poszczególne niezależne stosy elementów HTML.

Wartości ujemne

wartości ujemne mogą dodatkowo sprawić, że element HTML znajdzie się na spodzie stosu elementów HTML, do którego należy, ponadto element HTML posiadający ujemną wartość właściwości z-index może znaleźć się pod elementami HTML posiadającymi pozycję static, które należą do tego samego stosu elementów HTML co wspomniany element HTML

Przykład

div#blok-1 (poziom widoczności 0)
div#blok-2 (poziom widoczności 2)
div#blok-3 (poziom widoczności 1)

Przykładowy element "div#blok-2" tworzy nowy stos elementów HTML, którego poziom widoczności wynosi 2, ponieważ do wspomnianego elementu "div#blok-2" została dodana właściwość "z-index" wraz z wartością "2".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        position:relative;
        padding:1em;
        font-size:1.3em;
      }

      #blok-1 {
        width:350px;
        background-color:red;
      }

      #blok-2 {
        z-index:2;
        width:300px;
        left:5px;
        bottom:10px;
        background-color:orange;
      }

      #blok-3 {
        z-index:1;
        width:250px;
        left:10px;
        bottom:20px;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="blok-1">div#blok-1 (poziom widoczności 0)</div>
    <div id="blok-2">div#blok-2 (poziom widoczności 2)</div>
    <div id="blok-3">div#blok-3 (poziom widoczności 1)</div>

  </body>
</html>