Позиционирање на елементите што се преклопуваат со каскадни стилски плочи
Еден од предизвиците при користење на позиционирање на CSS за изгледот на веб страница е дека некои од вашите елементи може да се преклопуваат со други. Ова работи добро, ако сакате последниот елемент во HTML да биде на врвот, но што ако не го направите или што ако сакате да имате елементи кои во моментов не се преклопуваат со други за да го направат тоа затоа што дизајнот го повикува овој "слоевиден" изглед ? Со цел да се промени начинот на кој елементите се преклопуваат, треба да го користите сопственост на CSS.
Ако сте користеле графички алатки во Word и PowerPoint или повеќе робустен уредувач на слики како Adobe Photoshop, тогаш шансите се дека сте виделе нешто како z-индекс во акција. Во овие програми можете да ги нагласите објектите што сте ги нацртале и да изберете опција за "Испрати назад" или "Донеси напред" одредени елементи од вашиот документ. Во Photoshop, немате овие функции, но имате окно "Layer" на програмата и може да организирате каде елементот паѓа во платното со преуредување на овие слоеви. Во двата од овие примери, вие во суштина го поставувате z-индексот на тие објекти.
Што е z-индекс?
Кога користите позиционирање на CSS да поставите елементи на страницата, треба да размислите во три димензии. Постојат две стандардни димензии: лево / десно и горе / доле. Индексот од лево кон десно е познат како x-индекс, додека врвот до дното е y-индекс. Ова е како да поставите елементи хоризонтално или вертикално, користејќи ги овие две индекси.
Кога станува збор за веб дизајн, исто така има и редење на страницата. Секој елемент на страницата може да биде поставен над или под било кој друг елемент. Сопственоста на z-индексот одредува каде во стекот секој елемент е. Ако x-индекс и y-индекс се хоризонтални и вертикални линии, тогаш z-индексот е длабочина на страницата, во суштина 3-та димензија.
Сакам да размислувам за елементите на веб-страница како парчиња хартија, и самата веб-страница како колаж. Каде што лежеше на хартија е определено со позиционирање, и колку од тоа е покриена од страна на другите елементи е z-индекс.
З-индексот е број, или позитивен (пр. 100) или негативен (на пр. -100). Стандардниот z-индекс е 0. Елементот со највисок z-индекс е на врвот, следен од следниот највисок и така натаму до најнискиот z-индекс. Ако два елементи ја имаат истата вредност на z-индекс (или не е дефинирана, што значи употреба на стандардната вредност од 0), прелистувачот ќе ги слое во редоследот што го прикажуваат во HTML.
Како да го користите z-индексот
Дајте секој елемент што го сакате во вашиот оџак со поинаква вредност на z-индекс. На пример, ако имам пет различни елементи:
- елемент 1 - z-индекс на -25
- елемент 2 - z-индекс на 82
- елемент 3 - z-индекс не е поставен
- елемент 4 - z-индекс на 10
- елемент 5 - z-индекс на -3
Тие ќе собираат во следниов редослед:
- елемент 2
- елемент 4
- елемент 3
- елемент 5
- елемент 1
Препорачувам да користите многу различни вредности на z-индекс за да ги наместите вашите елементи. На тој начин, ако додадете повеќе елементи на страната подоцна, имате простор да ги слоете без да ги прилагодувате вредностите на z-индексот на сите други елементи. На пример:
- 100 за мојот најголем елемент
- 0 за мојот среден елемент
- -100 за мојот дното елемент
Можете исто така да дадете два елементи со иста вредност z-индекс. Ако овие елементи се наредени, тие ќе се прикажат по редоследот напишан во HTML, со последниот елемент на врвот.
Една забелешка, за елемент за ефективно користење на својството z-индекс, тој мора да биде елемент на блок ниво или да користи приказ на "блок" или "inline-block" во вашата CSS-датотека.
Авторски напис од Џенифер Крајнин. Уредено на 12.09.16 од Џереми Жирар.