Tentei da seguinte forma, mas não funcionou... continua com a de baixo ficando em cima da de cima, quando deveria ser o contrário. O que estou fazendo errado?
.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>