Абсолютный Div IE7 в относительном Div исчезает. z-index не решает проблему

#html #internet-explorer-7 #position #z-index

#HTML #internet-explorer-7 #позиция #z-индекс

Вопрос:

Каждый вопрос, который я нашел в SO, содержит исправление z-index в качестве решения. Это, к сожалению, похоже, не работает для меня.

Вот моя структура:

Тело
оболочка div
- заголовок div
- div main
  - страница-контейнер div
    
    страница div-background-image
    
    страница div-bottom-gradient
  - и т.д…
- нижний колонтитул 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. Удаление «position: absolute;» из #page-background-image устраняет проблему, но, очевидно, удаляет абсолютную позицию и портит макет. Установка z-индекса для каждого элемента в дереве ничего не меняет, независимо от того, использую ли я индексы от высокого к низкому или от низкого к высокому. Может ли быть другая проблема, вызывающая этот эффект? Я бы предпочел не прибегать к установке этого в качестве фонового изображения, поскольку изображение извлекается и размещается динамически.

Ответ №1:

Всегда помните, что если вы подаете заявку z-index , вы также должны подать заявку position как relative или absolute . По умолчанию для a div установлено значение static so z-index , которое игнорируется.

У #main вас есть z-index applied, но нет position — это может вызвать проблему.

1. Даже после добавления относительных позиций в divs все, что находится поверх #main, по-прежнему отодвигается назад. Я также пробовал z-индексы от низкого до высокого и от высокого до низкого в дереве div, что ничего не дало в IE7. Я постараюсь привести пример, на который я могу сослаться.

Ответ №2:

Оказывается, проблема заключалась в том, что внутри этого дерева других divs был плавающий div. Этот плавающий div убил всех предков, которые не были статическими (что продолжалось до #main). Решение состояло в том, чтобы добавить пустой div непосредственно перед плавающим div.