Получение абсолютно позиционированного элемента над относительным. (IE),

Question

Пожалуйста, обратитесь к тестовый сайт . Возникли проблемы в IE (6 и 7), чтобы элемент с абсолютным позиционированием отображался поверх элемента с относительно позиционным положением.

Желтое поле (абсолютное) должно появиться над синим (относительное). Я попытался дать синему z-index ниже, чем желтый, но это не сработало.

Любая помощь будет великолепна.

Answer 1

Вам нужно установить z-индекс на оранжевом поле, так как это тот, который содержит желтое поле. В IE6 / 7 желтый прямоугольник будет иметь только более высокий z-индекс, чем другие элементы внутри оранжевого контейнера.

#orange {
   position: relative;
   z-index: 1;
   background-color: orange;
}
#blue {
   background-color:blue;
   height:100px;
   overflow:hidden;
   position:relative;
   width:300px;
}

Answer 2

Укажите z-index для синего поля в явном виде:

#yellow {
background-color: yellow;
width: 100px;
height: 150px;
position: absolute;
z-index: 200;
}

#blue {
width: 300px;
height: 100px;
overflow: hidden;
background-color: blue;
position: relative;
z-index: 100;
}

Более того, укажите z-index для всех трех полей, чтобы исключить неправильное толкование браузерами.