Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Статьи по CSS » Статья по CSS 4. Работа со слоями
Не нравится(-) 7 Нравится(+)
Статья по CSS 4. Работа со слоями

Здравствуйте уважаемые посетители! В нашей следующей статье, мы поговорим о работе со слоями (атрибуте CSS 2.0 “z-index”).
Итак, начнём статью…



Общие сведения

Атрибут z-index допустимо применять только к свободно позиционированным объектам, то есть у всех слоёв должен стоять атрибут position:relative.
Как можно догадаться из вида атрибута z-index, он определяет положение объектов по оси Z и создает, таким образом, иллюзию трёхмерности страницы. Любой элемент может быть выше или ниже другого.

По умолчанию значение атрибута z-index – auto. При этом значении элементы идут один за другим по порядку написания в коде. Атрибут может быть задан положительным, отрицательным числом, или нулём. Например:
z-index:5;

Объект с большим значением атрибута z-index будет перекрывать атрибут с меньшим его значением. То есть объект с z-index равным 5 перекроет объект с z-index равным 3.

Атрибут поддерживается Internet Explorer начиная с версии 4.0. Для тегов frame и iframe поддерживается Internet Explorer начиная с версии 5.5.



Применение атрибута

Атрибут z-index применяется чаще всего для позиционирования сложных и/или активных блоков. В остальных случаях, когда код более-менее прост, стараются обходиться без этого атрибута, ведь ничего не мешает расположить, в коде, объект, находящийся выше над объектом, находящимся ниже. Ещё есть некоторые проблемы при использовании атрибута z-index к активным блокам, да и есть множество более простых способов оформления.

Итак, не смотря на то, что без атрибута z-index можно легко прожить, он остаётся достаточно востребованным в современной вёрстке.



Практическая часть

В практической части этой статьи, мы сделаем эффект лёгкой тени для текста без использования картинок, зато с использованием слоёв и атрибута z-index. Итак, приступим…
Как обычно, создадим файлы index.html и style.css. Запишем в веб-страницу стандартный начальный код:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

Теперь, нам необходимо прописать два слоя текста: сам слой и слой тени. Запишем в index.html такой код:
<div id="text">Любой текст</div>
<div id="shadow">Любой текст</div>
</body>
</html>

Итак, мы закончили работать с HTML, пора переходить к CSS. Для начала, зададим стили для текста:
#text {
     font:30px Tahoma;
     position: relative;
     color:#002f5f;
     z-index:2;
}

Теперь, зададим стили для тени:
#shadow {
     font:30px Tahoma;
     position: relative;
     color:#ccc;
     top:-35px;
     left:2px;
     z-index:1;
}

Заметим, что z-index тени меньше, чем у самого текста. Это значит, что тень будет именно там, где и должна быть – под текстом. Если сделали всё правильно должно получиться так:
Статья по CSS 4. Работа со слоями

Вот и всё, что нужно знать об атрибуте z-index, областях его применения и работе с ним. Все вопросы – задавайте в комментарии, или на форуме, демо – на стандартном месте.
Спасибо за внимание!



Автор: Российская школа CSS
-----------------------------------
Демо
Правила копирования материалов статьи
Перейти в категорию статей по CSS


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 21802 раз(а) и написали 9 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Июнь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!