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