В каждом вопросе, который я обнаружил в SO, в качестве решения указывается исправление z-index. Это, к сожалению, похоже, не работает для меня.
Вот моя структура:
- корпус
- div wrapper
- заголовок div
- div main
- div page-container
div page-background-image
div-страница-нижний градиент
- div primary
- div внешний контейнер
- и т.д ...
Нижний колонтитул div
Вот CSS
body {
color: #666;
font-size: 12px;
line-height: 18px;
background: url(images/bg-stripes.gif) repeat bottom left;
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
#wrapper {
position: relative;
margin: 0 auto;
width: 1280px;
padding-top: 30px;
background: transparent;
vertical-align: baseline;
z-index: 0;
}
#main {
position: relative;
clear: both;
overflow: hidden;
padding: 0 0 0 0;
background: #DDD;
z-index: 0;
margin: 0 auto;
width: 1280px;
}
#page-container {
padding: 0 0 0 0;
position: relative;
z-index: 2;
}
#page-background-image {
position: absolute;
left: 0;
top: 0;
width: 460px;
height: auto;
z-index: 1;
overflow: hidden;
}
Похоже, что жирный раздел в структуре выше помещается позади основного div. Удаление "позиция: абсолютная;" from # page-background-image исправляет проблему, но, очевидно, удаляет абсолютную позицию и портит макет. Установка z-индекса для каждого элемента в дереве ничего не меняет, независимо от того, использую я индексы от высокого к низкому или от низкого к высокому. Может ли быть другая проблема, которая вызывает этот эффект? Я бы предпочел не использовать его в качестве фонового изображения, так как изображение извлекается и размещается динамически.