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

Правило CSS z-index - позицията на елемента на страницата в координата Z: нивото на дисплея на елемента или слоя, в който се намира. Таг, който има повече z-индекс, ще се показва в неговата цялост. Маркерите се показват в реда, в който се показват в входящата нишка и се припокриват. Стойността на z-index определя

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

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

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

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

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

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

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

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

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

• Разделение id ="scCSS1`-
• Разделение id ="scCSS2`-
• Разделение id ="scCSS3`-
• Разделение id ="ScCSS4".

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

Реалните размери на областите, които заемат второто и третото изображение, се открояват съответно в жълти и сиви цветове.

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

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

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

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

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

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

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

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

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

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

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

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

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

Грешки в браузърите и програмистите

Не толкова често има ситуация, при която CSS z-index не работи, но това се случва. Правилата на таблицата с каскадни стилове винаги действат и обемът на файла стил често достига значителни обеми. Когато нещо не се показва правилно или просто не е това, което трябва да бъде, първо трябва да проверите собствения си код, след това да изчистите кеша на браузъра и отново да проверите собствения си код.

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

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

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

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

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

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

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

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

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

Всъщност z-index е просто правило за CSS. Целта му е да покаже нивото на маркера, така че браузърът да може да определи кога да се покаже елементът и коя част от него ще бъде видима. Слоят и страницата са много относителни понятия, тъй като е проблематично да се разработи страница и да се имат предвид стойностите на правилото z-index за различни опции за показване на съдържание.

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

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