Jak korzystać z indeksu Z w CSS
Pozycjonowanie nakładających się elementów za pomocą kaskadowych arkuszy stylów
axllll / iStock Vectors / Getty Images
Jedno z wyzwań podczas używania Pozycjonowanie CSS w przypadku układu strony internetowej niektóre elementy mogą nakładać się na inne. Działa to dobrze, jeśli chcesz mieć ostatni element w HTML być na górze, ale co jeśli nie lub co jeśli chcesz mieć elementy, które obecnie nie nakładają się na inne, aby to zrobić, ponieważ projekt tego wymaga „warstwowy” wygląd ? Aby zmienić sposób nakładania się elementów, musisz użyć właściwości z-index CSS.
Jeśli korzystałeś z narzędzi graficznych w programach Word i PowerPoint lub bardziej niezawodnego edytora obrazów, takiego jak Adobe Photoshop , są szanse, że widziałeś coś takiego jak indeks Z w działaniu. W tych programach możesz podświetlić narysowane obiekty i wybrać opcję: Wyślij wstecz lub Przesuń na wierzch niektóre elementy twojego dokumentu. W Photoshopie nie masz tych funkcji, ale masz panel „Warstwa” programu i możesz ustawić, gdzie element przypada na płótno, zmieniając te warstwy. W obu tych przykładach zasadniczo ustawiasz indeks Z tych obiektów.
Co to jest indeks Z?
Kiedy używasz pozycjonowania CSS do pozycjonowania elementów na stronie, musisz myśleć w trzech wymiarach. Istnieją dwa standardowe wymiary: lewy/prawy i góra/dół. Indeks od lewej do prawej jest znany jako indeks x, a indeks od góry do dołu to indeks y. W ten sposób możesz pozycjonować elementy poziomo lub pionowo, używając tych dwóch indeksów.
Jeśli chodzi o projektowanie stron , istnieje również kolejność układania strony. Każdy element na stronie może być umieszczony nad lub pod dowolnym innym elementem. Właściwość z-index określa, gdzie na stosie znajduje się każdy element. Jeśli x-index i y-index są liniami poziomymi i pionowymi, to z-index jest głębokością strony, zasadniczo trzecim wymiarem.
Pomyśl o elementach na stronie internetowej jak o kawałkach papieru, a o samej stronie jako o kolażu. Miejsce układania papieru jest określane przez pozycjonowanie, a to, ile z niego pokrywają inne elementy, jest indeksem Z.
- Z-index to liczba dodatnia (np. 100) lub ujemna (np. -100).
- Domyślny indeks Z to 0.
Element o najwyższym indeksie Z znajduje się na górze, po nim następuje następny najwyższy i tak dalej aż do najniższego indeksu Z. Jeśli dwa elementy mają taką samą wartość z-index (lub nie jest zdefiniowana, co oznacza użycie domyślnej wartości 0), przeglądarka ułoży je w kolejności, w jakiej pojawiają się w kodzie HTML.
Jak korzystać z indeksu Z
Nadaj każdemu elementowi, który chcesz umieścić w stosie, inną wartość indeksu Z. Na przykład, jeśli masz pięć różnych elementów:
- element A — z-indeks -25
- element B — z-indeks 82
- element C — z-indeks nie jest ustawiony
- element D — z-indeks 10
- element E — z-indeks -3
Będą układać się w następującej kolejności:
- element B
- element D
- element C
- element E
- element A
Do układania elementów zaleca się używanie bardzo różnych wartości indeksu Z. W ten sposób, jeśli później dodasz więcej elementów do strony, będziesz mieć miejsce na ich warstwy bez konieczności dostosowywania wartości z-index wszystkich pozostałych elementów. Na przykład:
- 100 dla twojego najwyższego elementu
- 0 dla twojego środkowego elementu
- -100 dla twojego dolnego elementu
Możesz również nadać dwóm elementom tę samą wartość indeksu Z. Jeśli te elementy są ułożone w stos, będą wyświetlane w kolejności, w jakiej są napisane w kodzie HTML, z ostatnim elementem na górze.
Aby element mógł efektywnie korzystać z właściwości z-index, musi być elementem na poziomie bloku lub wyświetlać w pliku CSS „block” lub „inline-block”.