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

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

Ответ 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", отличное от 'авто'. Контексты стеков не обязательно связаны с блоки. В будущих уровнях CSS, другие свойства могут stacking contexts, например 'opacity'...

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

Ответ 2

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

Ответ 3

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

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

Ответ 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 также работает