Empiler des éléments avec CSS

Question

Y a-t-il une propriété qui permet à un élément d'un div de s'empiler sur un autre élément dans le même div?

Je sais avec deux divs vous pouvez utiliser position: relative; & position: absolute; pour obtenir ce travail, mais avec deux éléments dans le même div je ne sais pas quoi faire.

Answer 1

Si vous souhaitez "empiler" éléments les uns sur les autres, oui, vous pouvez utiliser la propriété position.

Vous utiliseriez z-index pour modifier l'ordre des piles; l'élément avec le plus haut z-index serait dans avant d'un élément avec le z-index inférieur. Vous pouvez voir ceci ici, dans ce fiddle.

.el1 { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: yellow; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.el2, .el3 { 
 
    height: 50px; 
 
    width: 50px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: blue; 
 
    z-index: 2; 
 
} 
 

 
.el3 { 
 
    background: green; 
 
    z-index: 3; 
 
    top: 5px; 
 
    left: 5px; 
 
}

<div class="el1"> 
 
    <div class="el2">el2</div> 
 
    <div class="el3">el3</div> 
 
</div>