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