Генератор цветов Уроки C++ Уроки Windows forms Учебники по программированию Уроки HTML Уроки CSS Готовые задания Исходники Полезные программы
регистрация доменов

Дешёвые домены



Уроки CSS


Атрибут z-index CSS

В этом уроке вы увидите, как работает атрибут z-index и как его можно применить.

На одном небольшом участке окна веб-браузера можно "напихать" много позиционированных элементов и они будут накладываться друг на друга в соответствии с положением их объявления в коде web-страницы.

Указывая значения атрибута z-index: … ; можно регулировать порядок отображения элементов относительно друг друга.

Важно заметить, что данное свойство работает только для элементов, у которых в значении position: задано - fixed, relative или absolute.

Что бы наглядно продемонстрировать всё выше написанное сделаем пример, в котором создаются три блока, для которых задаются некоторые стили, а так же значения z-index: …;

Значения этого атрибута будут заданы в обратном порядке относительно расположения элементов – то есть тот элемент, который должен был отображаться выше всех блоков- будет отображаться ниже всех блоков. Помимо этого будет описано событие :hover для двух блоков – при на ведении курсора мышки на блок
его z-index становиться максимальным и блок отображается по верх всех других блоков.

<style>
 #z_one {
 position: relative;
 background: #C3F462;
 width: 300px;
 height: 80px;
 z-index: 3;
 }
 
 #z_two {
 position: relative;
 margin-top: -30px; 
 margin-left: 20px;
 background: #FCF98C;
 width: 300px;
 height: 80px;
 z-index: 2;
 }
 
 #z_three {
 position: relative;
 margin-top: -30px; 
 margin-left: 40px;
 background: #FCD18C;
 width: 300px;
 height: 80px;
 z-index: 1;
 }
 
 #z_two:hover, #z_three:hover {
 z-index: 4;
 }
 </style>
 
  <div id="z_one">Первый блок</div>
  <div id="z_two">Второй блок</div> 
  <div id="z_three">Третий блок</div> 
  
Первый блок
Второй блок
Третий блок


А вот пример тех блоков с теми же стилями, но БЕЗ атрибута z-index, где блоки уже отображаются в том порядке, как объявляются в коде web-страницы.

Первый блок
Второй блок
Третий блок



◄ Предыдущий урок Содержание Следующий урок ►