CSS z-индекс: преглед, својства

Правило CSS Z-означувач - страница елемент позицијата координира Z: на ниво на елемент на екранот или слој во кој се наоѓа. Ознака што има Z-означувач поголема ќе биде прикажан во целост. Тагови се прикажуваат по редослед како што се појавуваат во на дојдовен тек и се преклопуваат. приоритет видимости. Z-означувач вредност утврдува приоритет на видливост.

Ние мора да му оддадат почит на современи прелистувачи и алгоритми елементи на екранот. Од деновите кога графика и заробени екрани формирана клипинг проблем видливи и невидливи делови на елементи во прозорецот на апликацијата, видливи содржината на екранот технологија достигна одлични резултати. Во прозорецот на прелистувачот, сите елементи се прикажани правилно, корисникот го гледа само она што е наведен дизајн или инвеститорот.

На општо правило: цел и на ниво на

влезен поток (страница формирана сервер) секвенцијално чита прелистувачот. Сите тагови се прикажани во согласност со правилата на CSS и може да се преклопуваат.

Овој пример го опишува четири видливи елемент. Секое наредно се преклопува со претходната. На места каде што се поминува на тагови, таму е прашање на приоритет. Како по правило Z-означувач CSS тагови за сите овие исти и еднакви на 848, тоа ќе биде очигледно дека елемент кој оди како што следува. Сите што Понекогаш погледнува надвор од рамките на секоја од следниот елемент, очигледно.

правило видливост

Прелистувачи ги почитуваат правилата на видливост само "фер". Да излезе со алгоритам кој ви овозможува да се анализираат сите бруто наметнување и ги користат само оние кои, всушност, се сечат, со исклучок на оние делови кои се апсорбираат од страна на секоја следна елемент - е многу тешко.

Во повеќето случаи тоа не е потребно. Современа опрема е многу брзо, и ќе забележите прецрта елемент до точка каде што ќе го блокира следниот елемент, е многу проблематична.

Влијание врз низа елемент

Доволно е да се третиот таг scCSS3 зголемување на z-индекс, и на scCSS4 - да се намали, вкупната слика се менува. Редоследот на елементи во поток останува иста:

• id= 'scCSS1'; div id = "scCSS1;
• id= 'scCSS2'; div id = "scCSS2;
• id= 'scCSS3'; div id = "scCSS3;
• id= 'scCSS4'. div id = "scCSS4.

Треба да се напомене дека на втората слика е всушност зазема повеќе простор отколку што изгледа. Третата слика е иста. Покрај тоа, таа се состои од два дела (две јајца) на растојание едни од други.

Вистинската големина на регионите, кои заземаат втората и третата слики се означени со жолта и сива боја, соодветно.

Комбинацијата на Z-означувач на background-color

Треба да се напомене дека својствата на CSS позадина & Z-означувач дополнуваат едни со други. Сите елементи блок-ниво, како и сите други, секогаш заземаат правоаголна површина формирана од страна на максимална висина, а максималната ширина на содржина.

Користење на слики, можете да направите било поле на формулар елемент, но околу него секогаш ќе има правоаголник. Тоа е фактот дека тоа е важно да се земе во предвид правилно.

Можете да поставите текст на избраниот пат форма, но ако не се направи, содржината добива за секој елемент во правоаголна кутија, сукцесивно, по приемот на влез.

Користете CSS особини Z-означувач во елемент чија позадина во боја вредност е транспарентна (еден вид на транспарентност), може да се емулира било коло елемент. Иако во секој случај во реалноста елемент е правоаголен.

Настани и видливи елементи

На места каде што елементот е уште подобро блокиран од страна на друг елемент, настаните што нема да работи. Како општо правило, ако стварта е надвор од видното поле, тој, исто така, е зона на достапност.

Ако инвеститорот сака да го заклучите копчето или мени ствар, тоа може да биде ставен во текот на заклучување таг друга ознака, можеби транспарентен (на пример, со користење на владеењето на CSS непроѕирноста), но во секој случај, имаат повисоко CSS z-индекс.

Од настанот, од гледна точка на корисникот, може да се подели на релевантни и не имате било какви, тогаш последниот (со поместување на глувчето, со притискање случаен копчињата на тастатурата, сигналот тајмер) може да се користат за соодветно да ја смени содржината во прозорецот на прелистувачот.

Едноставен пример: еден посетител се движи стрелката од глувчето на менито, но се уште не е донесена одлука да се направи нешто. Инвеститорот може да обезбеди на настанот за следење на движењето на дијалогот на саканата точка (кликнете - еден посетител одлучува) и прикажување на соодветна содржина. Правило CSS Z-означувач е најдобро одговара за оваа пригода.

формат на слика

Од сликите се важен градежен материјал за кој било сајт (убавина, современост, функционалност - е вообичаена норма на работи), што е од големо значење за избор на формат на слика.

Од страна и големи, можете да го користите сите различни постоечките формати, но во однос на практичноста и ефикасност е доста разумно да се ограничи * .png за статични слики и * .gif - за анимирани слики. Популарни * .jpg е исто така добар, но тоа не му дозволува на флексибилност да се манипулира со простор на екранот.

Пребарувач на грешки и на инвеститорот

Не толку често случај, кога CSS z-индекс не функционира, но тоа се случува. Услови за Cascading Style Sheets секогаш работа, како и обемот на стил датотека често достигнуваат значителни количини. Кога нешто не е прикажан, или едноставно не се она што треба да биде, мора прво да се провери вашата лозинка, потоа исчистете го кешот на вашиот прелистувач и ги тестираат вашите сопствени кодот повторно.

Толкување на HTML и CSS, прелистувачот е речиси не се прават грешки - тоа е аксиома. Ако саканата ставка не е така, тогаш, во дизајнот на CSS {позиција: апсолутна; Z-означувач: 112.233; лево: 10px; врвот: 20px; } ... нешто недостасува или не се евидентираат.

Најчеста грешка - во ред Прикажана елемент изнесува недостасува упатување на нејзината видливост на апсолутна или релативна позиција. Понекогаш тоа може да работи за да го одредите стил директно на самиот елемент и не е негов стил. Во вториот случај, тоа е начин за излез, но тоа е првенствено зборувам за некој вид на грешка во кодот.

Стил мора да биде во класа или проект стил. Посочувајќи стил на елемент треба само во исклучителни случаи.

Користење jQuery.css (z-индекс, 123), исто така може да доведе до грешка, ако не се примени на класа или идентификатор. Покрај тоа, jQuery - алатка навистина извонреден развој. Сепак, пред да се применува тоа, не боли да се мисли: тоа е можно да се расфрла со импровизирани средства HTML / CSS, z-индекс - не е правило дека не бара итно внимание.

Точни движење на логички слоеви, и

Совршен Страница - станот. Во секој случај, пред вистински три-димензионална слика во далечната огромни размери, а не во овој особено потребни. Модерни веб-сајтови - тоа е вистинска искуство, реалниот свет задачи. Тие едноставно треба да работат добро и да го покаже рамен три-димензионална слика.

Патем, феноменот на целниот страница (целниот страница) во форма на опциите "градилиште" - најдобар доказ дека станот правоаголна форма и суво, но исклучително прецизна содржина - исто така добар и практичен. Но, тоа треба да се напомене дека на веб-сајтови на компании монопол држат до својата главната работа - лице на компанијата, производството функционалност и моќ. Информатичка технологија Чудовишта се чинеше дека целни страници - тоа е се соочуваат малите бизниси, додатоци, Herbalife и други "накит".

Како тоа или не, всушност точни, во иднина ќе се покаже. Важно е дека не само што го прави смисла да се наслика во содржината слоеви, но, исто така, да се обезбеди правилно движење меѓу нив во секое варијанта за изградба на веб-страница.

Одлично решение - AJAX (страница се ажурираат како што е потребно). Дури и повеќе ветува решение, кога на страницата покажува дека е потребно во овој момент на прозорецот на прелистувачот.

Всушност, Z-означувач - ова едноставно правило CSS. Нејзината цел - да се покаже на ниво на таг, така што прелистувачот може да се утврди кога елемент на екранот и на кој дел од овој елемент ќе бидат видливи. Слој и страница - многу релативна идеја, бидејќи тоа е проблематично да се дизајнира на страница и имајте во предвид значењето на член Z-означувач за различни приказ содржина.

Вообичаено, на инвеститорот ќе го избере омилен број, и тоа им дава на сите тагови во ред, како и фактот дека имаме некако да се издвоите, му ја доделува на следниот број. Закачите значење за слоеви и нивоа на страници - не е особено прогресивни и ветувачки практики.

Меѓутоа, ако овој потег семантика Z-означувач на дијалог со посетителот, тоа е можно да се создаде практичен ефект. Слично на тоа како тагови може да се надредениот на едни со други, тоа е можно да се наметне дијалог (сајт посетител) a и вршење на движење меѓу нив. Од оваа перспектива, примената на правилата на CSS Z-означувач се чини дека е многу изводливо и практични.