Проблемы с z-index в осле

Аватар пользователя volocuga volocuga 2 февраля 2010 в 2:06

Вот горя не знал и даже думал,что ie приличный браузер Sad

Значит задача такая. В хидере у меня форма аякс-поиска,типа автокомплит,результаты выпадают вниз. Ниже,в основном теле страницы стоит блок,который завёрнут в див #block и имеет свойство position:relative;

В этом блоке у меня 3 дива #div1,#div2,#div3,которые имеют position:absolute; плюс основной статический текст. Эти плавающие дивы у меня подключаются через яву попеременно и показываются НАД основным содержимым в єтом блоке.

Далее собственно трабла: когда работает поиск и вываливаются результаты,див c результатами #search (имеет свойство position:absolute;) не перекрывает блок,а уходит ЗА него

В лисе те значения z-index,которые я задаю для #search и #block работают,в осле - нет.

Как я понял,ie принимает во внимание только z-index внутри родительского дива. Я назначаю свойства position:relative для самого верхнего дива,который объединяет #search и #block,следовательно z-index для них должен работать,но он не работает.Почему?

Комментарии

Аватар пользователя Stutzer Stutzer 2 февраля 2010 в 2:46

Если коротко, то в то время как нормальные браузеры при позиционировании элементов по оси Z класть хотели на z-index-ы родителей этих элементов (у кого z-index больше, тот и победил), то IE6-7 принимает во внимание z-index-ы всех родителей элемента с позиционированием relative или absolute.

Т.е. как-то так:

<div style="position: relative; z-index: 1">
  <div style="position: relative; z-index: 42">Йа в осле буду выше</div>
</div>

<div style="position: relative;">
  <div style="position: relative; z-index: 9999">Йа в нормальном браузере буду выше</div>
</div>

Аватар пользователя volocuga volocuga 2 февраля 2010 в 13:43

Так пробовал,не работает. Единственный работающий способ - задать отрицательный z-index для #block,но в этом случае ссылки и инпуты стают некликабельными Smile Такое западло Sad

Аватар пользователя Stutzer Stutzer 2 февраля 2010 в 14:16

Работать должно 100. ищите внимательнее, где пропустили z-index.
Недавно сам столкнулся с похожей проблемой. Оказалось, дело было z-index системного класса .block в какой-то из цээсэсок темы.

Аватар пользователя volocuga volocuga 2 февраля 2010 в 16:06

Ага,решение найдено и оно простое. Я выпустил из виду маркап страницы
Собственно,моя структура такая

<div id="page">
  <div id="header"> тут много всяких вложенных дивов и выпадающая форма поиска </div>
  <div id="main"> тут много всяких вложенных дивов и тот самый непокорный блок</div>
  <div id="footer">тоже много всяких вложенных дивов</div>
</div>

Я назначил для #header и #main position:relative; и z-index

и я снова люблю ослика Smile

Аватар пользователя Ильич Рамирес Санчес Ильич Рамирес Санчес 2 февраля 2010 в 18:26

топикстартер попробуй поиграть флоатами и отрицательными маржинами на втором блоке. сработает. но надо заранее хотя бы размеры знать в длину.