Едно от предизвикателствата при използването на позициониране на CSS за оформлението на уеб страницата е, че някои от елементите ви могат да се припокриват с други. Това е добре, ако искате последният елемент в HTML да бъде отгоре, но какво да направите, ако не го направите, или ако искате да имате елементи, които понастоящем не се припокриват с други, за да го направят, защото дизайнът изисква този "пластове" ? За да промените начина, по който елементите се припокриват, трябва да използвате собствеността на CSS.
Ако сте използвали графични инструменти в Word и PowerPoint или сте използвали по-здрав редактор на изображения като Adobe Photoshop, вероятно сте виждали нещо като z-index в действие. В тези програми можете да маркирате обекта, който сте съставили, и да изберете опция "Изпращане в обратна посока" или "Довеждане напред" на определени елементи от вашия документ. В Photoshop нямате тези функции, но имате панела "Layer" на програмата и можете да подредите къде елементът попада върху платното, като пренареждате тези слоеве. И в двата случая по същество настройвате z-индекса на тези обекти.
Какво представлява Z-индексът?
Когато използвате CSS позициониране за позициониране на елементи на страницата, трябва да мислите в три измерения. Има два стандартни размера: ляво / дясно и отгоре / отдолу. Индексът от ляво на дясно е известен като индексът, а отгоре до долу е y-индексът. По този начин ще позиционирате елементите хоризонтално или вертикално, като използвате тези два индекса.
Що се отнася до уеб дизайна, има и ред на подреждане на страницата. Всеки елемент на страницата може да бъде наслоен над или под всеки друг елемент. Показателят "z-index" определя къде в комина е разположен всеки елемент. Ако x-индексът и y-индексът са хоризонталните и вертикалните линии, тогава z-index е дълбочината на страницата, по същество третото измерение.
Помислете за елементите на уеб страница като парчета хартия и самата уеб страница като колаж. Където определяте хартията се определя от позиционирането и колко от нея се покрива от другите елементи е z-индексът.
- Z-индексът е число, било то положително (например 100) или отрицателно (например -100).
- По подразбиране z-индексът е 0.
Елементът с най-високия z-индекс е отгоре, следван от следващия най-висок и т.н. до най-ниския z-индекс. Ако два елемента имат една и съща стойност на индекса z (или не е дефинирана, т.е. стойността по подразбиране е 0), браузърът ще ги слое в реда, в който се показват в HTML.
Как да използвате Z-Index
Дайте на всеки елемент, който искате в стека, различна стойност z-индекс. Например, ако имате пет различни елемента:
- елемент А - z-индекс от -25
- елемент B - z-индекс от 82
- елемент С - z-index не е зададен
- елемент D - z-индекс от 10
- елемент E - z-индекс от -3
Те ще се нареждат в следния ред:
- елемент В
- елемент D
- елемент С
- елемент Е
- елемент А
Препоръчително е да използвате много различни стойности на z-индекса, за да стекате елементите си. По този начин, ако добавите повече елементи към страницата по-късно, имате възможност да ги слоете, без да е необходимо да коригирате стойностите на z-index на всички останали елементи. Например:
- 100 за най-добрия си елемент
- 0 за средния ви елемент
- -100 за долния елемент
Можете също така да дадете на два елемента една и съща стойност на z-индекса. Ако тези елементи са подредени, те ще се показват в реда, в който са написани в HTML, с последния елемент отгоре.
Една бележка: за елемент, който ефективно да използва собствеността z-index, той трябва да е елемент на ниво блок или да използва дисплей "block" или "inline-block" във вашия CSS файл.
