how to manage layers in position:absolute css block

Question

How can i show reveal div always on top of others btn div ..which is positioned absolute on map element, and have to stay where it is.

Other words how to make green 1111111111 on top of red 232323232

jsfiddle here

<div class="map">
    <div class="btn" style="top:20px; left:40px;">
        1212121
        <div class="reveal">1111111111</div>
    </div>
        <div></div>
    <div class="btn" style="top:130px; left:100px;">
        232323232
        <div class="reveal">222222222</div>
    </div>
</div>


.map{
    background-color: yellow; 
    height: 600px;
    width: 600px;
    position: relative;
}

.btn{
    background-color: red;
    height: 100px;
    width: 200px;
    position:absolute;
    z-index:3;
}

.reveal {
    background-color: green;
    height: 400px;
    width: 200px;
    display: none;
    position:relative;
    z-index:4;
}

Answer 1

By definition:

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

To get 1212121 to be on top of 232323232 you will have to give .btn on hover a higher z-index