Как работает 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

Установка и сброс значений

• Удалить отрицательные внешние отступы которые установлены элементам A, B, C, чтобы:
  • естественное расположение в стеке.
  • показать как IE 6 обрезает верхушку элемента A, и что установка в стиле позиционирования "position:relative" исправляет это.
• Вернуть отрицательные внешние отступы для A, B и C

Разметка

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, вы можете проследить в реальном времени как эти элементы изменяют свои стили.