Jak korzystać z z-index w CSS3?

By /

CSS

z-index jest właściwością CSS, która pozwala na kontrolę układu elementów wzdłuż osi Z (osi pionowej) strony internetowej. Dzięki z-index, można określić, które elementy powinny być wyświetlane jako “na wierzchu” i które powinny być ukryte za innymi elementami. Jest to szczególnie przydatne w przypadku tworzenia interfejsów użytkownika z elementami, które nakładają się na siebie, takimi jak modale, wyskakujące okienka, dropdown menu czy nawet złożone layouty.

Przykład użycia z-index

W poniższym przykładzie użyjemy z-index w połączeniu z HTML i CSS, aby pokazać, jak można kontrolować nakładanie się trzech prostokątnych divów.

Kod HTML i CSS
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład z-index</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    position: absolute;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
  }

  #box1 {
    background-color: red;
    left: 100px;
    top: 100px;
    z-index: 1;
  }

  #box2 {
    background-color: green;
    left: 130px;
    top: 130px;
    z-index: 2;
  }

  #box3 {
    background-color: blue;
    left: 160px;
    top: 160px;
    z-index: 3;
  }
</style>
</head>
<body>

<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>

</body>
</html>

W tym przykładzie mamy trzy divy (#box1, #box2, #box3), każdy z innym kolorem (czerwony, zielony, niebieski) i wartością z-index (odpowiednio 1, 2, 3). Każdy div jest przesunięty o 30px w prawo i w dół względem poprzednika, tworząc efekt nakładania się. Dzięki zastosowaniu różnych wartości z-index, możemy kontrolować kolejność nakładania się tych divów. Najwyższa wartość z-index sprawia, że dany element znajduje się na wierzchu.

Zrozumienie z-index

  • Wartości z-index: Liczba całkowita (może być ujemna), która określa poziom, na którym znajduje się element. Wyższe wartości powodują, że elementy są wyświetlane bliżej użytkownika (na “wierzchu”), podczas gdy niższe wartości umieszczają elementy dalej (pod innymi elementami).
  • Kontekst stosowania: z-index działa tylko na elementach z pozycjonowaniem innym niż static (np. relative, absolute, fixed, sticky).
  • Stosowanie warstw: Elementy z wyższym z-index tworzą nową warstwę nad elementami z niższym z-index.

Podsumowanie

z-index jest potężnym narzędziem w CSS3, umożliwiającym precyzyjne kontrolowanie układu elementów na stronie. Poprawne stosowanie z-index pozwala na tworzenie zaawansowanych efektów wizualnych i interfejsów użytkownika, takich jak modale, menu czy nakładające się elementy.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video Fullstack w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top