Абсолютно позиционированный элемент над относительным. (IE)

Question

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

Желтый ящик (абсолютный) должен появиться над синим полем (относительным). Я попытался дать синий цвет, индекс z ниже желтого, но это, похоже, не работает.

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

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-индекс для синей коробки в явном виде:

#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-индекс для всех трех ящиков для устранения неправильной интерпретации браузеров.