How to position a div in front of another

Question

I tried it this way, but it didn’t work... keep the bottom one on top of the top one, when it should be the other way around. What I’m doing wrong?

.funil{
    text-align:center;
}
.funil_1 { 
    margin-bottom:-20px;
    z-index:4;
}
.funil_2 { 
    margin-bottom:-15px;
    z-index:3;
}
.funil_3 { 
    margin-bottom:-10px;
    z-index:2;
}
.funil_4 { 
    z-index:1;
}

<div class='posts-container funil'>
    <div class="funil_1"><img src="/images/funil_1.png"></div>
    <div class="funil_2"><img src="/images/funil_2.png"></div>
    <div class="funil_3"><img src="/images/funil_3.png"></div>
    <div class="funil_4"><img src="/images/funil_4.png"></div>
</div>

Answer 1

z-index only works for elements with the specified position.

Specify the position of the elements to function... :)

.funil div {
    position: relative;  //(position:absolute, position:relative, ou position:fixed).
}