Урок №12. CSS. Z-index. Слои.


 

В этом уроке речь пойдет о слоях. Представьте себе несколько цветных бумаг, которые наложили друг на дружку. Что Вы видите? Правильно, Вы видите тот, который находится поверх всех остальных. Что бы увидеть, что находиться под листом, его нужно убрать, и так далее.

По такому же принципу работает свойство z-index. С его помощью можно создать несколько пронумерованных слоев. На каждом из слоев создать необходимые для нас элементы и манипулировать слоями. Чем выше номер слоя, тем он выше в лестнице слоев. К примеру, у вас на сайте есть 12 слоев пронумерованных от 1 и до 12, в таком случае пользователь сначала увидит слой под номером 12 (z-index:12;).

Данный принцип используется при создании выпадающих меню. Давайте в качестве хорошего примера мы и создадим это меню.

Для начала создадим само меню в html-документе:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>CSS | z-index | слои</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

      <div id="menu">

       <a href="#">Спорт</a>

       <a href="#">Кино</a>

       <a href="#">Музыка</a>

       <a href="#">Туризм</a>

      </div>

     </body>

   </html>

 

Зададим стиль для меню:

#menu{

  width:120px;

  height:100px;

  border:2px solid red;

  margin:5px;

  padding:5px;

  background:black;

  position:absolute;

  left:20px;

  top:15px;

}

#menu a{

  color:#00FF99;

  text-decoration:none;

  display:block;

}

#menu a:hover{

  color:#00FF99;

  text-decoration:underline;

  display:block;

}

 

Как видно, для меню мы выбрали абсолютное позиционирование, именно оно помогает создавать слои на одном месте.

Добавим блоки подменю:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>CSS | z-index | слои</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

      <div id="menu">

       <a href="sport">Спорт</a>

       <a href="movie">Кино</a>

       <a href="musik">Музыка</a>

       <a href="tourism">Туризм</a>

      </div> 

      <div id="sport">

       <a href="#">Футболл</a>

       <a href="#">Баскетболл</a>

       <a href="#">Теннис</a>

       <a href="#">Плавание</a>

      </div>

      <div id="movie">

       <a href="#">Детективы</a>

       <a href="#">Драмы</a>

       <a href="#">Комедии</a>

       <a href="#">Триллеры</a>

      </div>

      <div id="musik">

       <a href="#">Реп</a>

       <a href="#">Кантри</a>

       <a href="#">Поп</a>

       <a href="#">Рок</a>

      </div>

      <div id="tourism">

       <a href="#">Аляска</a>

       <a href="#">Япония</a>

       <a href="#">Оттава</a>

       <a href="#">Торонто</a>

      </div>

     </body>

   </html>

 

Как видно из примера, подменю это обычные div-ы. Для каждого из них мы сделаем одинаковый стиль, но разный индекс слоя:

#menu{

  width:120px;

  height:100px;

  border:2px solid red;

  margin:5px;

  padding:5px;

  background:black;

  position:absolute;

  left:20px;

  top:15px;

}

#menu a{

  color:#00FF99;

  text-decoration:none;

  display:block;

}

#menu a:hover{

  color:#00FF99;

  text-decoration:underline;

  display:block;

}

#sport, #movie, #musik, #tourism{

  background:black;

  border:2px solid red;

  position:absolute;

  left:140px;

  top:20px;

  width:120px;

  height:100px;

}

#sport{

  z-index:1;

}

#movie{

  z-index:2;

}

#musik{

  z-index:3;

}

#tourism{

  z-index:4;

}

#sport a, #movie a, #musik a, #tourism a{

  display:block;

  color:#00FF99;

  text-decoration:none;

}

#sport a:hover, #movie a:hover, #musik a:hover, #tourism a:hover{

  display:block;

  color:red;

  text-decoration:underline;

}

 

Результат:

Пример свойства z-index

 

Как я и говорил, видеть мы будем только последний индекс, то есть слой с туризмом. Что бы решить эту проблему нам надо сделать так, что бы отображалось лишь меню, а подменю появлялось лишь при наведении курсором на ссылку меню.

Сделать это не сложно, просто сделаем их прозрачными при помощи правила visibility:hidden:

#sport, #movie, #musik, #tourism{

  background:black;

  border:2px solid red;

  position:absolute;

  left:140px;

  top:20px;

  width:120px;

  height:100px;

  visibility:hidden;

}

 

Обновите браузер и увидите только меню. Но увы, при наведении курсора ничего не появляется. Это потому что одного языка CSS недостаточно. Нужен сценарий, а его можно сделать с помощью язика javascript. Это уже чуть позже.

Для того что бы вы увидели как это работает, вставьте текст ниже в блокнот и сохраните как z-indexscript.js в папку, где находится html и css документы:

function sports(){

  document.getElementById("sport").style.visibility='visible';

  document.getElementById("movie").style.visibility='hidden';

  document.getElementById("musik").style.visibility='hidden';

  document.getElementById("tourism").style.visibility='hidden';

}

function movies(){

  document.getElementById("sport").style.visibility='hidden';

  document.getElementById("movie").style.visibility='visible';

  document.getElementById("musik").style.visibility='hidden';

  document.getElementById("tourism").style.visibility='hidden';

}

function musiks(){

  document.getElementById("sport").style.visibility='hidden';

  document.getElementById("movie").style.visibility='hidden';

  document.getElementById("musik").style.visibility='visible';

  document.getElementById("tourism").style.visibility='hidden';

}

function tourisms(){

  document.getElementById("sport").style.visibility='hidden';

  document.getElementById("movie").style.visibility='hidden';

  document.getElementById("musik").style.visibility='hidden';

  document.getElementById("tourism").style.visibility='visible';

}

 

Затем в HTML-документе подключите этот файл. Сделать это можно при помощи ссылки, котроую нужно разместить в голове документа:

     <head>

       <title>>CSS | z-index | слои</title>

       <link rel="stylesheet" type="text/css" href="style.css">

       <script type="text/javascript" src="z-indexscript.js"></script>

     </head>

 

Что бы это работало, нужно добавить условие, при котором все это будет работать, а это наведение курсора мыши. В ваше меню добавьте простое условие onMouseOver:

      <div id="menu">

       <a href="sport" onMouseOver="sports();">Спорт</a>

       <a href="movie" onMouseOver="movies();">Кино</a>

       <a href="musik" onMouseOver="musiks();">Музыка</a>

       <a href="tourism" onMouseOver="tourisms();">Туризм</a>

      </div>

 

Вот и все, откройте страницу в браузере и наслаждайтесь. До встречи на следующем уроке. Удачи!

 


 

Закрыть меню