Почему z-index не работает для div?

Question

Я пытаюсь отобразить нижний колонтитул поверх фона нижнего колонтитула, но z-index, похоже, не работает. Кто-нибудь видит, что с ним не так? http://jsfiddle.net/f2ySC/

Answer 1

Вы должны явно определить свойство position:

.footerBox {
    background-color: #FFFFFF;
    border: 10px solid #DDDDDD;
    margin: 10px 0 -200px -10px;
    width: 1185px;
    z-index: 1000;

    position:relative;

}

http://jsfiddle.net/f2ySC/1/

---

Это приводит нижний колонтитул в current stacking context:

... Корневой элемент формирует корневой контекст стека.Другие контексты суммирования генерируются любым позиционированным элементом (включая относительно позиционированные элементы), имеющим вычисленное значение z-index, отличное от auto.Контексты стека не обязательно связаны с содержащимися блоками.На будущих уровнях CSS другие свойства могут вводить контексты стека, например «непрозрачность» ...

http://www.w3.org/TR/CSS2/visuren.html#z-index

Answer 2

использование отрицательной маржи не является хорошей практикой.Z-индекс: -1;работает это просто отображать содержимое на фоне другого div:)

Answer 3

Это тот эффект, который вы ищете? Обновленный пример

Я добавил position: relative; к #footerBack и .footerBox, чтобы включить z-index

Answer 4

В footerBox установите атрибут position на absolute Ваш новый код должен выглядеть следующим образом

.footerBox {
    background-color: #FFFFFF;
    border: 10px solid #DDDDDD;
    margin: 10px 0 -200px -10px;
    width: 1185px;
    z-index: 1000;
    position: absolute;
}

См. Демо здесь

Использование position: relative также работает