CSS z-index nie działa? Jak naprawić z-index CSS tutorial

Jeśli masz problem, bo wpisujesz coraz wyższe wartości z-index, lecz nic się nie dzieje, to jest na to kilka sposobów.

Z-index nie działa? Sprawdź pozycję stylowanego elementu

Najczęściej, jeśli miałem kłopot z osiągnięciem odpowiedniego nałożenia na siebie elementów, to po prostu zapomniałem nadać mu stylu position: absolute; albo position: relative;. Jeśli chcesz ustawić element z podaniem odległości od krawędzi elementu nadrzędnego, to użyj wartości absolutnej. Jeśli element nadal ma być w miejscu, ale chcesz wybić go nad inny, który się nakłada, to przypisz jego pozycji wartość relatywną i z-index o wartości wyższej, niż element, który go zakrywa.

element {
    position: relative;
    z-index: 10;
}

Z-index nie działa z pozycją relatywną

Doszło do tego, że googlujesz CSS. Jeśli powyższa wskazówka nie działa, to Twój element znajduje się w złym miejscu w swojej strukturze HTML. Może być tak, że masz poniższą strukturę:

nav (relative)
 |-- ul.nav (relative)
 |    |--li.item (absolute)
 |
 |-- img.picture (absolute)

Musisz unikać takich błędów. To prosty przypadek, ale jeśli w powyższym schemacie obraz nachodzi na nawigację i chcemy mieć dropdown, a jego nie widać, to trzeba będzie zmienić położenie nawigacji lub obrazu. Pozycja relatywna nawigacji jest też niepotrzebna. Jeśli masz ten kłopot, że z-index nie działa, koniecznie spróbuj przestawić swój element wyżej w drzewie DOM.

Z-index jak naprawić: przestaw element wyżej w drzewie HTML

Spójrz na popup z newsletterem, który tak często wyskakuje na odwiedzanych stronach internetowych. Zobaczysz, że jest umieszczany najczęściej bezpośrednio w tagu body, ponieważ daje to gwarancję przebicia przez wszystkie warstwy. Wyżej już się nie da. Spróbuj tego rozwiązania i daj znać, czy Ci pomogłem. 🙂

Oceń artykuł
[3]