z-index not indexing properly [duplicate]

Answer 1

The z-index property only applies to positioned elements.

You could add position: relative and it will work as expected (example).

The default value of the position property is static, which is why it wasn't working.

Answer 2

Add position:relative; in css of both blocks:

<div style="width: 300px; height: 90px; overflow: hide;">
        <div style="position: relative; width:300px; height: 50px; z-index: 2; background-color: #ff0000;">
        </div>
        <div style="position: relative; width:300px; height: 50px; z-index: 1; background-color: #ff00ff; margin-top: -30px;">
        </div>
    </div>

http://jsfiddle.net/uu721kgc/