Један од изазова приликом коришћења ЦСС позиционирања за постављање веб странице јесте да неки од ваших елемената могу да се преклапају са другима. Ово функционише у реду ако желите да задњи елемент у ХТМЛ-у буде на врху, али шта ако не желите или шта ако желите да имате елементе који тренутно не преклапају друге да то учине зато што дизајн захтева овај "слојевити" изглед ? Да бисте променили начин преклапања елемената, потребно је користити особину ЦСС-а.
Ако сте користили графичке алате у програму Ворд и ПоверПоинт или робуснијим уређивачем слика као што је Адобе Пхотосхоп, онда су шансе да сте видели нешто попут з-индекса у акцији. У овим програмима можете истакнути предмете које сте нацртали и изаберите опцију "Пошаљи назад" или "Доврши напред" одређених елемената вашег документа. У Пхотосхоп-у, немате ове функције, али имате окно "Лаиер" програма и можете организирати гдје се елемент пада на платно преуређивањем ових слојева. У оба ова примера, ви у суштини постављате з-индекс ових објеката.
Шта је З-индекс?
Када користите ЦСС позиционирање за позиционирање елемената на страници, морате размишљати у три димензије. Постоје две стандардне димензије: лево / десно и горње / доње. Индекс лево-десно је познат као к-индекс, док је горњи до доњи индекс и-индекс. Овако би позиционирали елементе хоризонтално или вертикално, користећи ова два индекса.
Када је у питању веб дизајн, постоји и редослед стајања на страници. Сваки елемент на страници може бити слојевит изнад или испод било ког другог елемента. Особина з-индекса одређује где је у стацку сваки елемент. Ако су к-индек и и-индекс хоризонталне и вертикалне линије, онда је з-индекс дубина странице, у суштини трећа димензија.
Замислите елементе на веб страници као делове папира и саму веб страницу као колаж. Где постављате папир одређујете позиционирањем, а колико од тога покривају остали елементи, је з-индекс.
- З-индекс је број, било позитиван (нпр. 100) или негативан (нпр. -100).
- Подразумевани з-индекс је 0.
Елемент са највишим индексом з-индекса је на врху, затим следећи највиши и тако даље до најнижег з-индекса. Ако два елемента имају исту вриједност з-индекса (или није дефинисана, што значи кориштење подразумеване вриједности од 0), претраживач ће их слојити у редоследу који се појављује у ХТМЛ-у.
Како користити З-индекс
Дајте сваком елементу који желите у вашем стацку другачију вредност з-индекса. На пример, ако имате пет различитих елемената:
- елемент А - з-индекс од -25
- елемент Б - з-индекс од 82
- елемент Ц - з-индекс није подешен
- елемент Д - з-индекс од 10
- елемент Е - з-индекс -3
Ставиће се у следећи ред:
- елемент Б
- елемент Д
- елемент Ц
- елемент Е
- елемент А
Препоручује се да користите знатно различите вредности з-индекса како бисте стакли своје елементе. На тај начин, ако касније додате више елемената на страницу, имајте слободу да их слојете без подешавања вредности з-индекса свих осталих елемената. На пример:
- 100 за ваш највиши елемент
- 0 за ваш средњи елемент
- -100 за ваш доњи елемент
Можете такође дати два елемента исту вриједност з-индекса. Ако су ови елементи сложени, они ће се приказати у редоследу који су написани у ХТМЛ-у, са последњим елементом на врху.
Једна напомена: за елемент који ефикасно користи својство з-индекса, он мора бити елемент блок-нивоа или користити приказ "блок" или "инлине-блоцк" у вашој ЦСС датотеки.
