CSS правило z-index - позиция на елемент на страница в Z координата: нивото на показване на елемент или слоя, в който се намира. Tag, който z-index ще бъде показан изцяло. Етикетите се показват по реда на тяхното проследяване във входния поток и се припокриват. Стойността на z-index определя приоритета на видимостта.

Трябва да отдадем почит на съвременните браузъри и алгоритми за показване на елементи. Тъй като графиките задържат екраните и проблемът с клипирането на видимите и невидимите части на елементите в прозорците на приложенията, технологията за показване на видимо съдържание е постигнала отлични резултати. В прозореца на браузъра всички елементи се показват неправилно, потребителят вижда само това, което е определено от дизайна или разработчика.

Общо правило: ред и ниво

Входният поток (страницата, генерирана от сървъра) се чете от браузъра последователно. Всички маркери се показват в съответствие с правилата на CSS и могат да се припокриват. В този пример са описани четири видими елемента. Всеки следващ се наслагва на предишния. В местата, където маркерите се припокриват, възниква приоритетният въпрос. Тъй като правилото z-index CSS във всички тези тагове е същото и същото 848, тогава елемента, който ще бъде видим, ще бъде видим. Изглежда, че всичко, което излиза от всеки следващ елемент.

Правило за видимост

Браузърите се придържат към правилото за виждане изключително "честно". За да излезе с алгоритъм, който ви позволява да се анализира на едро всички слоеве и да се прилагат само тези, коитонаистина се пресичат, без да се вземат предвид онези области, които се абсорбират от всеки един от следните елементи - това е много трудно.


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

Ефект върху последователността на елементите

В третия тег scCSS3 е достатъчно да се увеличи стойността на z-индекса, а в scCSS4 да се намали, тъй като общата картина се промени. В този случай последователността на местоположението на елементите в потока остава същата:

div id = 'scCSS1';

div id = 'scCSS2';

div id = 'scCSS3';

div id = 'scCSS4'.

Трябва да се отбележи, че втората картина всъщност заема повече място, отколкото изглежда. Третата картина също. Освен това тя се състои от две части (две яйца), които са на разстояние една от друга. Реалните размери на областите, които заемат второто и третото изображение, са маркирани съответно в жълто и сиво.

Комбиниране на z-индекса с фоновия цвят

Трябва да се отбележи, че свойствата на CSS background & amp; z-индекс се допълват взаимно. Всички блокови елементи, както и всички други, винаги заемат правоъгълна област, формирана от максимална височина и максимална ширина на съдържанието. Като използвате изображение, можете да предоставите всяка форма на областта на даден елемент, но около нея винаги ще има правоъгълник. Това е факт, който е важен, за да се вземе под внимание правилно. Можете да поставите текст по контура на избраната форма, но ако не го направите, съдържанието попада в който и да е елемент, като правоъгълники последователно, като вход от входния поток.
Използването на свойството CS-z-index в елемент, чийто фон-цвят е прозрачен (някакъв вид прозрачност) ви позволява да емулирате всеки контур на даден елемент. Въпреки че във всеки случай елементът ще бъде правоъгълен.

Събития и видимост на елементите

На места, където даден елемент е блокиран от друг елемент, събитията в него няма да работят. По общо правило, ако даден артикул е извън полезрението, той също е извън обсега. Ако разработчик иска да блокира бутон или елемент от менюто, той може да постави друг маркер над блокирания маркер, евентуално прозрачен (например с непрозрачност на CSS), но във всеки случай има по-висок CS-z-индекс. Тъй като събитията могат да се разделят на тези, които не са от значение от гледна точка на потребителя, последното (преместване на мишката, случайно натискане на бутон на клавиатурата, таймер сигнал) може да се използва за адекватна промяна на съдържанието в прозореца на браузъра. Един прост пример: посетителят премести показалеца към елемента от менюто, но все още не е решил да направи нищо. Разработчикът може да предвиди това събитие, да проследи движението до желаната точка от диалога (щракване - посетителят взема решение) и да покаже подходящото съдържание. Правилото за CS-z-индекс не е най-подходящото за това.

Формат на изображението

Тъй като образът е важен строителен материал за всеки сайт (красота, модерност, функционалност - вече е обичайното правило на нещата), изборът на формат е важен заизображения. Като цяло, можете да използвате цялото разнообразие на съществуващите формати, но по отношение на практичност и ефективност е разумно да се ограничат * .png до статични изображения и * .gif - за анимирани изображения. Популярният * .jpg също е добър, но не ви позволява гъвкаво да манипулирате областта на дисплея.

Грешки в браузъра и разработчиците

CS-индексът z не работи толкова често, но се случва. Правилата на каскадния стилов лист винаги работят, а обемът на стилистичния файл често достига значителни обеми. Когато нещо не е наред или просто не е необходимо, първо трябва да проверите собствения си код, след това да изчистите кеша на браузъра си и да проверите отново своя собствен код.
Тълкуването на HTML и CSS, браузърът почти не позволява грешки - това е аксиома. Ако не е необходим елемент, тогава в CSS дизайна {position: absolute; z-индекс: 112233; наляво: 10px; отгоре: 20px; } нещо пропуснато или записано погрешно. Най-често срещаната грешка са неправилно зададените координати на елемента, липсва индикация за неговата видимост, абсолютна или относителна позиция. Понякога ръководството за стил може да работи директно върху елемент, а не в неговия стил. В последния случай това е изход от ситуацията, но това главно говори за някаква грешка в кода. Стилът трябва да бъде зададен в стила на класа или идентификатора. Посочете стила за елемент само в изключителни случаи. Използването на jQuery.css (z-index, 123) може също да доведе до грешка, ако не се прилага към класа или кода. В допълнение, jQuery наистина е чудесен инструмент за разработчици.Въпреки това, преди да го приложите, това няма да ви попречи да мислите за HTML /CSS инструменти, z-index не е правило, което не изисква внимателно внимание.

Правилни слоеве и логическо изместване

Идеалната страница е плоска. Във всеки случай, на истински насипни изображения в голям мащаб далеч, но няма специална нужда. Съвременните сайтове са реална практика, реални задачи. Те просто трябва да работят, добре, плосък показва насипно изображение. Между другото, феноменът на целевите страници (целевата страница) под формата на "дизайн на сайта" опции - най-доброто доказателство, че плоски правоъгълни форми и суха, но изключително ясно съдържание - също е добро и практично. Но трябва да се отбележи, че сайтовете на монополните компании остават на тях: най-важното - лицето на компанията, неговата функционалност и производствен капацитет. Чудовища от информационни технологии признават, че целевите страници са човек от малък бизнес, аксесоари, хербалайф и други "бижута". Независимо дали това е вярно или не, бъдещето ще покаже. Важно е във всеки вариант на изграждане на обекти да има смисъл не само да се излага съдържанието, но и да се гарантира правилното движение между тях. Идеалното решение е AJAX (страницата се актуализира според нуждите). Още по-обещаващо решение, когато страницата показва какво е необходимо в този момент в прозореца на браузъра. По същество, z-index е просто CSS правило. Неговата цел е да покаже нивото на етикета, така че браузърът да може да определи кога да покаже елемента и коя част от този елемент ще бъдевидими. Слоят и страницата са много относителни понятия, защото е проблематично да се създаде страница и да се запази стойността на правилото за z-index за различните опции на дисплея. Обикновено разработчикът избира предпочитан номер и му дава всички етикети подред, а тези, които трябва да се откроят някак си, присвоява следващия номер. Даването на стойност на слоевете и нивата на страницата не е особено прогресивна и обещаваща практика. Въпреки това, ако преместите семантиката на z-index в диалог с посетителя, можете да създадете практически ефект. Точно както маркерите могат да се припокриват, можете да налагате диалози (посетителски сайт) и да се движите между тях. От тази гледна точка, прилагането на CS-правилото z-индекс изглежда много разумно и практично.