38. Indeks elementu HTML

W poprzedniej części kursu CSS dowiedzieliśmy się o pozycjach w jakich może być wyświetlony element HTML. Domyślnie jest on wyświetlony w pozycji statycznej, jednak możemy to zmienić za pomocą właściwości position. Gdy element HTML stanie się elementem wyświetlonym w pozycji relatywnej, absolutnej lub ustalonej to pozycję takiego elementu HTML możemy kontrolować za pomocą właściwości: top, right, bottom, left.

Co się stanie, gdy zmienimy pozycję kilku elementów HTML i będą one znajdowały się jeden na drugim? Który z nich zobaczymy jako pierwszy? Na te pytania odpowie nam ta część kursu CSS. Na początek dodamy kilka przykładowych elementów HTML do części body dokumentu HTML.

<body>

  <div id="rodzic">
    <div id="pierwszy">pierwsze dziecko elementu - #rodzic</div>
    <div id="drugi">drugie dziecko elementu - #rodzic</div>
    <div id="trzeci">trzecie dziecko elementu - #rodzic</div>
  </div>

</body>

Rezultat:

Naszym oczom ukazały się cztery elementy div. Pierwszy z nich jest rodzicem pozostałych trzech elementów div. Za pomocą właściwości left oraz bottom sprawimy, aby elementy te znalazły się jeden na drugim. Z poprzedniej części kursu CSS wiemy, że aby właściwość left oraz bottom oddziaływały na element HTML, to musi być on wyświetlony w pozycji relatywnej (relative), absolutnej (absolute) lub ustalonej (fixed).

#pierwszy {
  position:relative;
}

#drugi {
  position:relative;
  left:20px;
  bottom:40px;
}

#trzeci {
  position:relative;
  left:40px;
  bottom:80px;
}

Rezultat:

Od tej pory elementy dzieci przesłaniają siebie nawzajem. Domyślnie najbardziej dla nas widocznym elementem HTML będzie ten element dziecko, który został umieszczony jako ostatni w kodzie HTML (w swoim rodzicu).

<body>

  <div id="rodzic"> <!-- element rodzic -->
    <div id="pierwszy">pierwsze dziecko elementu - #rodzic</div>
    <div id="drugi">drugie dziecko elementu - #rodzic</div>
    <div id="trzeci">trzecie dziecko elementu - #rodzic</div> <!-- ten element będzie dla nas najbardziej widoczny, ponieważ jest on ostatnim dzieckiem swojego rodzica -->
  </div>

</body>

Domyślną kolejność z jaką widzimy przesłaniające się elementy HTML, wyświetlone w pozycji relatywnej, absolutnej lub ustalonej, możemy kontrolować za pomocą właściwości z-index. Im wyższą ustalimy wartość właściwości z-index dla danego elementu HTML tym bardziej ten element będzie dla nas widoczny, w przypadku gdy inne elementy HTML będą go przesłaniać. Odwrócimy kolejność z jaką widzimy poszczególne elementy dzieci:

#pierwszy {
  position:relative;
  z-index:3;
}

#drugi {
  position:relative;
  left:20px;
  bottom:40px;
  z-index:2;
}

#trzeci {
  position:relative;
  left:40px;
  bottom:80px;
  z-index:1;
}

Rezultat:

Od tej pory najbardziej widocznym dla nas elementem HTML w naszym przykładzie jest element z właściwością z-index oraz wartością 3, ponieważ pozostałe elementy HTML posiadają niższy indeks, czyli niższą wartość właściwości z-index. Kod HTML ostatniego przykładu znajduje się poniżej:

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

    <style>
      div {
        text-align:center;
        padding:30px;
        border:2px dashed black;
        background-color:white;
        box-shadow:4px 4px 4px black;
      }

      #pierwszy {
        position:relative;
        z-index:3;
        background-color:lightblue;
      }

      #drugi {
        position:relative;
        left:20px;
        bottom:40px;
        z-index:2;
        background-color:lightgreen;
      }

      #trzeci {
        position:relative;
        left:40px;
        bottom:80px;
        z-index:1;
        background-color:gold;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      <div id="pierwszy">element - div - z indeksem 3</div>
      <div id="drugi">element - div - z indeksem 2</div>
      <div id="trzeci">element - div - z indeksem 1</div>
    </div>

  </body>
</html>

W naszym przykładzie wszystkie elementy dzieci zostały wyświetlone w pozycji relatywnej, ponieważ została do nich dodana właściwość position wraz z wartością relative. Dowiedzieliśmy się wcześniej, że domyślnie, gdy kilka elementów dzieci znajdzie się jeden na drugim, to najbardziej widocznym dla nas elementem HTML będzie ten, który został umieszczony w kodzie HTML jako ostatni element swojego rodzica, jednak ta zasada obowiązuje tylko w przypadku gdy ostatni element jest wyświetlony w pozycji innej niż domyślna pozycja statyczna. Inaczej mówiąc, elementy wyświetlone w pozycji relatywnej, absolutnej lub ustalonej mają "przewagę" nad elementami wyświetlonymi w domyślnej, statycznej pozycji. Po prostu są one bardziej widoczne niż elementy wyświetlone w pozycji statycznej. Przykład, który znajduje się poniżej, nieco bardziej wyjaśni nam tą zależność.

Kod HTML przykładu znajduje się poniżej:

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

    <style>
      div {
        text-align:center;
        padding:30px;
        border:2px dashed black;
        background-color:white;
        box-shadow:4px 4px 4px black;
      }

      #pierwszy {
        background-color:lightblue;
      }

      #drugi {
        position:relative;
        left:20px;
        bottom:40px;
        background-color:tomato;
      }

      #trzeci {
        background-color:gold;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      <div id="pierwszy">pierwszy element - div - pozycja statyczna</div>
      <div id="drugi">drugi element - div - pozycja relatywna</div>
      <div id="trzeci">trzeci element - div - pozycja statyczna</div>
    </div>

  </body>
</html>

Teraz zajmiemy się nieco innym układem elementów HTML, a mianowicie przyjrzymy się, które elementy HTML są dla nas bardziej widoczne w relacji przodek oraz potomek. W poprzedniej części kursu CSS dowiedzieliśmy się, że elementy HTML, które są umieszczone jeden w drugim, w kodzie HTML, tworzą coś na wzór stosu, gdy zostaną wyświetlone w oknie przeglądarki internetowej. Domyślnie w takiej sytuacji najbardziej widocznym dla nas elementem HTML danego elementu #rodzic będzie ten element HTML, który jest jego ostatnim potomkiem.

<body>

  <div id="rodzic">element - #rodzic
    <div id="potomek1">pierwszy potomek elementu - #rodzic
      <div id="potomek2">drugi potomek elementu - #rodzic
        <div id="ostatni_potomek">ostatni potomek elementu - #rodzic</div>
      </div>
    </div>
  </div>

</body>

Rezultat:

Nasz dotychczasowy przykład prezentuje elementy div, które tworzą hierarchię typu przodek oraz potomek, czyli kilka elementów HTML, które są umieszczone jeden w drugim. Jedyne co możemy zrobić w takim wypadku, za pomocą właściwości z-index, to sprawić, aby dany element HTML został wyświetlony pod określonymi elementami HTML. Aby tego dokonać musimy spełnić trzy warunki. Do elementu HTML, który ma zmienić swoją kolejność widoczności, należy dodać właściwość z-index wraz z ujemną wartością, np. -1. Musimy określić element HTML, do którego element z właściwością z-index:-1; ma zostać przesunięty. Dodajemy do takiego elementu właściwość z-index, lecz tym razem z dodatnią wartością, np. 1. Oba elementy muszą być wyświetlone w pozycji innej niż statyczna pozycja, np. w pozycji relatywnej, co uzyskamy dzięki właściwości position oraz wartości relative.

#rodzic {
  position:relative;
  z-index:1;
  background-color:gold;
}

#ostatni_potomek {
  position:relative;
  z-index:-1;
  left:110px;
  top:110px;
  background-color:tomato;
}

Rezultat:

Tak o to ostatni potomek oraz jego cała zawartość została umieszczona pod innymi elementami HTML, lecz nie pod elementem z właściwością z-index:1; Kod HTML ostatniego przykładu został umieszczony poniżej:

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

    <style>
      div {
        text-align:center;
        padding:30px;
        border:2px dashed black;
        background-color:white;
        box-shadow:4px 4px 4px black;
      }

      #rodzic {
        position:relative;
        z-index:1;
        background-color:gold;
      }

      #potomek1 {
        background-color:lightblue;
      }

      #potomek2 {
        background-color:lightgreen;
      }

      #ostatni_potomek {
        position:relative;
        z-index:-1;
        top:110px;
        left:110px;
        background-color:tomato;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">element - #rodzic
      <div id="potomek1">pierwszy potomek elementu - #rodzic
        <div id="potomek2">drugi potomek elementu - #rodzic
          <div id="ostatni_potomek">ostatni potomek elementu - #rodzic</div>
        </div>
      </div>
    </div>

  </body>
</html>

W następnej części kursu CSS zapoznamy się ze sposobami tworzenia cieni w tekście oraz w elemencie HTML.

Previous37. Pozycja statyczna, relatywna, absolutna oraz ustalona Next39. CSS3 - Cień tekstu oraz cień elementu HTML

Last updated 1 month ago