A position:
static z-index:
not set a position: static z-index: not set
B position:
static z-index:
not set b position: static z-index: not set
C position:
static z-index:
not set c position: static z-index: not set
Как работает z-index! На этой странице показано что такое стек элементов.
Как пользоватлься примером
Шесть разноцветных элементов (A, a, B, b, C, c), которые могут перетаскиваться мышкой.
Ниже представлены разноцветные поля ввода, соответствующие каждому элементу, в которых вы можете ввести z-index
, а также выбрать тип позиционирования.
z-index:
position:
Static
Relative
Absolute
Fixed
z-index:
position:
Static
Relative
Absolute
Fixed
z-index:
position:
Static
Relative
Absolute
Fixed
z-index:
position:
Static
Relative
Absolute
Fixed
z-index:
position:
Static
Relative
Absolute
Fixed
z-index:
position:
Static
Relative
Absolute
Fixed
Установка и сброс значений
Разметка
Html-разметка соответствующая этим шести элементам:
<div id="A">A<div id="a">a</div></div>
<div id="B">B<div id="b">b</div></div>
<div id="C">C<div id="c">c</div></div>
CSS
Таблица стилей соответствующая этим элементам. обратите внимание, что отрицательное значение свойства margin
используется для того чтобы посмотреть естественное расположение в стеке, которое вы можете удалить нажав на ссыоку выше.
#A,#B,#C {
height:14em;
width:15em;
margin-top:-80px
}
#a,#b,#c {
height:6em;
width:11em
margin:1em auto;
}
Подсказка
Используя Firebug , вы можете проследить в реальном времени как эти элементы изменяют свои стили.