opacity ändrar z-index?
 

Jag har en div som innehåller 2 divar enligt exempel nedan:

<div class="showArea">

<div class="pattern"></div>
<div class="active"></div>

</div>

diven med pattern klassen har följande css:

.pattern {

height: 1200px;
width: 100%;
z-index: 2;

}

och diven med active har följande css:

.active {

margin: 0 auto;
width: 992px;
height: 1200px;
z-index: 3;
margin-top: -1200px;

}

Med dessa inställningar är allt frid och fröjd, men om jag sänker opaciteten på diven med klass pattern på följande vis opacity: 0.2; så lägger sig den över diven med klassen active fastän active har ett högre z-index.

Någon som fattar varför?

Använd absolut positionering istället!

z-index är specifikt avsett för att reglera ordningen för positionerade element (position: absolute | relative | etc) så allt är nog som det ska...