CSS: проблема позиционирования

Question

Итак, у меня есть слайд-шоу, вот css для начала:

#slideshow {
    position:relative;
    height:300px;
    width: 477px;
    border: 1px solid #FFF;
    float: left;
    margin-bottom: 30px;
    margin-left: 20px;

}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

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

#regForm {
position: absolute;
top: 120px;
left: 500px;
background: #000;
color: #FFF;
width: 500px;
height: 240px;
border: 6px solid #18110c;
text-align: center;
margin: 40px;
padding: 1px;
  opacity: 0.75;
  -moz-opacity: 0.75; /* older Gecko-based browsers */
  filter:alpha(opacity=75); /* For IE6&7 */

}

Как мне правильно расположить его так, чтобы окно div отображалось поверх слайд-шоу, а не под ним?

Answer 1

Добавьте z-index:11; к объявлению стиля #regForm.