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