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

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

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

  • тело
  • div wrapper
    • div header
    • div main
      • div page-container
        • div page-background-image
          • div page-bottom-gradient
      • div primary
        • div left-menu
      • 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-индекса для каждого элемента в дереве ничего не меняет, независимо от того, использую ли я индексы от высокого к низкому или от низкого к высокому. Может ли быть другая проблема, вызывающая этот эффект? Я бы не стал прибегать к установке этого изображения в качестве фонового, так как изображение вытягивается и размещается динамически.


html z-index position internet-explorer-7
person Alec Sanger    schedule 05.10.2011    source источник
comment
пожалуйста, опубликуйте живой пример с образцом текста внутри :)   -  person    schedule 05.10.2011

Ответы (2)


arrow_upward
1
arrow_downward

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

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

person no.    schedule 05.10.2011
comment
Даже после добавления относительных позиций в div все, что находится поверх #main, по-прежнему отодвигается на задний план. Я также попробовал z-индексы от низкого к высокому и от высокого к низкому в дереве div, что ничего не дало в IE7. Я постараюсь привести пример, на который я могу сослаться. - person Alec Sanger; 05.10.2011

arrow_upward
1
arrow_downward

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

person Alec Sanger    schedule 05.10.2011