z-index | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Главная » Справочник CSS3 » Позиционирование


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


z-index | Свойство CSS

Свойство z-index устанавливает положение элемента.




Свойство z-index устанавливает положение элемента на Z оси относительно остальных наложенных элементов.При наложении одних элементов на другие основную роль будет играть применяемое к ним свойство position.Числовые значения могут быть как положительными так и отрицательными,при этом чем выше значение,тем выше будет находится один элемент над другим по Z оси.Свойство применимо к элементам со свойством position,создано в версии CSS2 но проходит валидацию согласно версии CSS3.





Дополнительные свойства применяемые к z-index

СвойствоОписание
positionПозиционирует элемент дополнительными значениями


Дополнительные значения применяемые к z-index

ЗначениеОписание
<Число>Любое положительное или отрицательное число
autoБраузер сам определит положение элемента,аналогично значению z-index:0;
inheritНаследует значения от родителя

Свойство работает в браузерах



Пример применения свойства

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство z-index</title>
<style type="text/css">
<!--
.one {
position:relative;
z-index:1;
top:0;
left:0;
width:300px;
height:100px;
color:white;
background:indigo;
text-align:center;
}
.two {
position:absolute;
z-index:2;
top:40px;
left:40px;
width:300px;
height:100px;
color:red;
background:green;
text-align:center;
}
.tree {
position:fixed;
z-index:3;
top:80px;
left:80px;
width:300px;
height:100px;
color:orange;
background:blue;
text-align:center;
}
-->
</style>
</head>
<body>
<div class="one">z-index & relative</div>
<div class="two">z-index & absolute</div>
<div class="tree">z-index & fixed</div>
</body>
</html>


Пример в действии


Генератор свойства z-index




Поэкспериментируйте сами




Русские шрифты






Источник: http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
Категория: Позиционирование | Добавил: IZOTOP (07.05.2012) | Автор: Меренков Михаил W
Просмотров: 1343 | Теги: css, что означает, свойство, z-index, style, для чего, что это | Рейтинг: 5.0/1

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]