z-index nicht richtig indiziert [duplizieren]

Question

Oct 05, 2014, 09:54 PM

z-index nicht richtig indiziert [duplizieren]

Diese Frage hat hier bereits eine Antwort:

Die Eigenschaft z-index verhält sich nicht wie erwartet 3 answers

Okay, dieser Code generiert also zwei Blöcke in einem div. Der obere Block sollte über den unteren Block gehen, da der obere einen höheren Z-Index hat, aber wenn ich dem unteren Block einen oberen Rand gebe: -30px, geht er über den oberen Block.

<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>

Wie bekomme ich den oberen Block über den unteren Block?