CSS Z-индекс: преглед, имоти

Член CSS Z-индекс - страница елемент позиция координира Z: нивото на елемента на дисплея или слой, в който се намира. Маркер, който е Z-индекс по-голям ще бъде показана в пълен размер. Tags са показани в реда, в който се появи в входящия поток и припокриване. приоритет видимости. Z-индекс определя приоритета на видимост.

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

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

входен поток (стр формира сървър) последователно прочита на браузъра. Всички етикети, които са показани в съответствие с правилата на CSS и могат да се припокриват.

Този пример описва четири видими елемент. Всеки следващ припокрива с предишно такова. В местата, където се пресичат таговете, там е въпрос на приоритет. Като правило Z-индекс CSS тагове за всичко това същото и равно на 848, ще стане ясно, че елемент, който върви по следния начин. Всичко, което наднича изпод всеки от следващия елемент, очевидно.

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

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

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

Влияние на масив елемент

Достатъчно е да се третият маркер scCSS3 увеличи Z-индекса, а в scCSS4 - да я намали, общата картина се променя. Последователността на елементи в поток остава същата:

• id= 'scCSS1'; Разделение ИД = "scCSS1";
• id= 'scCSS2'; Разделение ИД = "scCSS2";
• id= 'scCSS3'; Разделение ИД = "scCSS3";
• id= 'scCSS4'. Разделение ИД = "scCSS4".

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

Действителният размер на регионите, които заемат второто и третото Изображенията са подчертани в жълто и сиво съответно.

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

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

Използването на снимки, можете да направите всяка форма поле елемент, но около него винаги ще има правоъгълник. Факт е, че е важно да се вземе предвид правилно.

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

Използвайте свойства CSS Z-индекс в елемента, чиито фон цвят стойност е прозрачен (вид на прозрачност), могат да подражават всеки елемент на схема. Въпреки, че във всеки случай в действителност елемент е правоъгълна.

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

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

Ако програмист иска да заключите бутон или меню елемента, то може и да бъде поставен върху заключващия маркер друг етикет, може би един прозрачен (например, използвайки правилото на CSS непрозрачност), но във всеки случай, с по-висок CSS Z-индекс.

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

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

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

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

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

Браузър грешки и на разработчика

Не толкова често се случва, когато CSS Z-индексът не работи, но това се случва. Условия за Cascading Style Sheets винаги работят, а обемът на файла със стилове често достигне значителни обеми. Когато нещо не се показва, или просто не са това, което трябва да бъде, първо трябва да се провери своя собствен код, а след това да изчистите кеша на браузъра си и да тествате вашия собствен код отново.

Тълкуване на HTML и CSS, браузърът е почти не правят грешки - това е аксиома. Ако желаната опция не е така, а след това, в дизайна на CSS {позиция: абсолютна; Z-индекс: 112233; лява: 10px; отгоре: 20px; } ... нещо липсва или не е записана.

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

Стил трябва да бъде в клас или ID стил. Посочвайки стил на елемента трябва само в изключителни случаи.

Използване jQuery.css (Z-индекс, 123) може да доведе до грешка, ако не се прилага към класа или идентификатор. В допълнение, JQuery - инструмент наистина забележителна развитие. Въпреки това, преди да я приложите, не боли да се мисли, възможно ли е да се откажат от самоделно означава HTML / CSS, Z-индекс - не е правило, което не изисква незабавно внимание.

Правилното движение на логическите слоеве и

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

Между другото, феномена на целевата страница (целевата страница) под формата на опции "строителна площадка" - най-доброто доказателство, че плоският правоъгълна форма и сухо, но изключително точното съдържание - също добър и практичен. Но трябва да се отбележи, че в сайтовете на фирмите монополисти залепнали за тяхното най-важното - лицето на компанията, нейната продукция функционалност и мощ. Информационни технологии Monsters смятат, че целеви страници - това е малките предприятия са изправени, аксесоари, Herbalife и други "бижута".

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

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

В действителност, Z-индекс - това просто правило CSS. Неговата цел - да покаже нивото на маркер, така че браузърът може да се определи, когато показването на елемента и която част на този елемент ще се вижда. Layer и страницата - много относително понятие, защото това е проблем за проектиране на страницата и да се има предвид значението на Правило Z-индексът за различен дисплей съдържание.

Обикновено, разработчик избира любим номер, и го дава на всички етикети в един ред, както и факта, че трябва да по някакъв начин се открояват, задава следващия брой. Придават значение на слоеве и нива на страници - не е особено прогресивни и обещаващи практики.

Въпреки това, ако се движат семантика Z-индексът за диалог с посетителя, че е възможно да се създаде практически ефект. Подобно на начина, маркери могат да се наслагват един върху друг, че е възможно да се наложи диалог (посетител на сайта) е и да извършват движение между тях. От тази гледна точка, прилагането на правилата на CSS Z-индекс изглежда, че е много възможно и практично.