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.

Informacje dodatkowe

brak

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

przeznaczenie

element HTML każdego typu

pozycja

relative, absolute, fixed (również static, lecz tylko wtedy, gdy element HTML jest elementem dzieckiem elementu HTML typu flex, inline-flex, grid lub inline-grid)

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

tak, lecz tylko wartość liczba całkowita

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.

Domyślnie, gdy oba nachodzące na siebie elementy HTML posiadają pozycję static lub oba nachodzące na siebie elementy HTML posiadają pozycję różną od pozycji static, wtedy bardziej na wierzchu (wraz ze swoimi elementami potomkami) jest ten element HTML, który został wyświetlony w późniejszej kolejności w oknie przeglądarki internetowej. W przeciwnym wypadku bardziej na wierzchu jest ten element HTML, który nie posiada pozycji static. Domyślnie im element HTML niżej w kodzie HTML, tym element HTML zostaje wyświetlony w późniejszej kolejności w oknie przeglądarki internetowej.

Przykład

  z-index:auto;
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 (wraz ze swoimi elementami potomkami) jest ten stos elementów HTML, który posiada wyższą wartość właściwości "z-index".

Wartości ujemne

wartości ujemne dodatkowo mogą 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 oraz należącymi do tego samego stosu elementów HTML co wspomniany element HTML posiadający ujemną wartość właściwości z-index

Przykład

  z-index:2;
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>