Jednym z wyzwań podczas korzystania z pozycjonowania CSS do układu strony internetowej jest to, że niektóre z twoich elementów mogą nakładać się na inne. Działa to dobrze, jeśli chcesz, aby ostatni element w kodzie HTML był na wierzchu, ale co jeśli nie lub jeśli chcesz mieć elementy, które obecnie nie nakładają się na inne, aby to zrobić, ponieważ projekt wymaga tego "warstwowego" wyglądu ? Aby zmienić sposób nakładania się elementów, należy użyć właściwości CSS.
Jeśli używałeś narzędzi graficznych w programach Word i PowerPoint lub bardziej niezawodnym edytorze graficznym, takim jak Adobe Photoshop, prawdopodobnie zobaczyłeś coś w rodzaju akcji z-Z w akcji. W tych programach możesz wyróżnić narysowane obiekty i wybrać opcję "Wyślij do tyłu" lub "Przesuń do przodu" określone elementy dokumentu. W programie Photoshop nie masz tych funkcji, ale masz panel "Warstwa" programu i możesz rozmieścić elementy na płótnie, zmieniając kolejność warstw. 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órny / dolny. Indeks od lewej do prawej jest znany jako indeks X, a od góry do dołu - indeks y. W ten sposób możesz pozycjonować elementy w poziomie lub w pionie, używając tych dwóch indeksów.
Jeśli chodzi o projektowanie stron internetowych, istnieje również kolejność układania strony. Każdy element na stronie można ułożyć nad lub pod dowolnym innym elementem. Właściwość z-index określa, gdzie w stosie znajduje się każdy element. Jeśli x-index i y-index są liniami poziomymi i pionowymi, wówczas indeks Z jest głębokością strony, zasadniczo trzecim wymiarem.
Pomyśl o elementach na stronie internetowej jako kawałkach papieru i samej stronie jako kolażu. Miejsce, w którym kładzie się papier, jest określane przez pozycjonowanie, a ile jest pokryte przez pozostałe elementy, to indeks Z.
- Indeks z jest liczbą, dodatnią (na przykład 100) lub ujemną (na przykład -100).
- Domyślny indeks Z to 0.
Element o najwyższym indeksie Z jest u góry, a następnie najwyższy i tak dalej, aż do najniższego indeksu Z. Jeśli dwa elementy mają taką samą wartość indeksu Z (lub nie są zdefiniowane, co oznacza, że używają wartości domyślnej 0), przeglądarka będzie je warstwować w kolejności, w jakiej pojawiają się w kodzie HTML.
Jak korzystać z Z-Index
Daj każdemu elementowi, który chcesz w swoim stosie, inną wartość z-index. Na przykład, jeśli masz pięć różnych elementów:
- element A - indeks z -25
- element B - indeks z 82
- element C - z-index nie ustawiony
- element D - indeks z 10
- element E - z-index of -3
Będą układać stos w następującej kolejności:
- element B
- element D
- element C
- element E
- element A
Zalecane jest używanie bardzo różnych wartości indeksu Z do układania elementów w stos. W ten sposób, jeśli później dodasz więcej elementów do strony, będziesz mieć możliwość umieszczenia ich w warstwach bez konieczności dostosowywania wartości z-index wszystkich pozostałych elementów. Na przykład:
- 100 dla twojego najlepszego elementu
- 0 dla twojego środkowego elementu
- -100 dla twojego dolnego elementu
Możesz także podać dwa elementy o tej samej wartości z-index. Jeśli te elementy są ułożone w stos, będą wyświetlane w kolejności, w jakiej są zapisane w kodzie HTML, z ostatnim elementem na górze.
Jedna uwaga: aby element efektywnie wykorzystywał właściwość z-index, musi to być element blokowy lub użyć wyświetlania "bloku" lub "bloku inline" w pliku CSS.
