z-index no indexa correctamente [duplicado]
Esta pregunta ya tiene una respuesta aquí:
La propiedad del índice z no se comporta como se esperaba 3 respuestasMuy bien, entonces este código genera dos bloques en un div. El bloque superior debe ir sobre el bloque inferior porque la parte superior tiene un índice z más alto, pero cuando le doy al margen inferior un margen superior: -30px va por encima del bloque superior.
<html>
<head></head>
<body>
<div style="width: 300px; height: 90px; overflow: hidden;">
<div style="width:300px; height: 50px; z-index: 2; background-color: #ff0000;">
</div>
<div style="width:300px; height: 50px; z-index: 1; background-color: #ff00ff; margin-top: -30px;">
</div>
</div>
</body>
</html>
¿Cómo consigo que el bloque superior vaya por encima del bloque inferior?