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. 🙂