Posso impilare elementi con sovrapposizione usando puro CSS?

Question

È possibile posizionare un numero sconosciuto di elementi in un contenitore in modo che appaia impilato quando quel contenitore non è abbastanza grande? Sto cercando di farlo solo con HTML e CSS.

Ecco come appare se il genitore è più grande dei bambini.

Ecco quello che sto cercando di realizzare quando ci sono più bambini che occupano i genitori (colore di riempimento per mostrare l'ordine di sovrapposizione):

Alcune cose che ho guardato, ma aveva nessuna fortuna con (forse mi manca qualcosa o semplicemente non così buono):

1. contatore CSS - funziona solo per contenuto erty
2. Nesting i bambini div uno dentro l'altro (come Inception) FlexBox
3. CSS - si avvolge solo o riduce

Ecco tipo fuori quello che sto cercando di fare: http://codepen.io/vickyleong/pen/VaPBYg. Prova a ridimensionare la finestra.

NOTA: I bambini sono le piazze, ma accatastati con sovrapposizione, come cascata

sto usando Sass, ma qui è il mio codice con un semplice HTML e CSS:

body, * { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 

 
.card { 
 
    display: block; 
 
    width: 100%; 
 
    padding: 1rem; 
 
    background-color: #FAFAFA; 
 
    border: 1px solid #F4F4F4; 
 
    box-shadow: 0px 1px 3px 1px #DDD; 
 
} 
 

 
.card-content { 
 
    margin: 1rem; 
 
} 
 

 
.student-pic-sm { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.round-pic { 
 
    background-color: #AAA; 
 
    border-radius: 50%; 
 
} 
 

 
.batch-list-item .card-title h2 { 
 
    margin: 1rem 0; 
 
} 
 
.batch-list-item .card-content { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    margin: 0; 
 
} 
 
.batch-list-item .student-pic-list { 
 
    height: 100px; 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1; 
 
     -ms-flex: 1; 
 
      flex: 1; 
 
} 
 
.batch-list-item .round-pic { 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    border: 3px solid #333; 
 
    overflow: visible; 
 
} 
 
.batch-list-item .round-pic .round-pic { 
 
    margin-left: 25%; 
 
    margin-top: -3px; 
 
} 
 
.batch-list-item .round-pic:nth-child(2n) { 
 
    background-color: #BBB; 
 
} 
 
.batch-list-item .round-pic:nth-child(3n) { 
 
    background-color: #CCC; 
 
} 
 
.batch-list-item .space-filler { 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1; 
 
     -ms-flex: 1; 
 
      flex: 1; 
 
} 
 
.batch-list-item .students-count { 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0 0 8rem; 
 
     -ms-flex: 0 0 8rem; 
 
      flex: 0 0 8rem; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
} 
 
.batch-list-item .students-count p { 
 
    font-size: 16pt; 
 
} 
 

 
.student-pic-list { 
 
    position: relative; 
 
} 
 
.student-pic-list > div + div { 
 
    position: absolute; 
 
    left: 4%; 
 
} 
 
.student-pic-list > div + div + div { 
 
    left: 8%; 
 
} 
 
.student-pic-list > div + div + div + div { 
 
    left: 12%; 
 
} 
 
.student-pic-list > div + div + div + div + div { 
 
    left: 16%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div { 
 
    left: 20%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div { 
 
    left: 24%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div { 
 
    left: 28%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div { 
 
    left: 32%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div { 
 
    left: 36%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 40%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 44%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 48%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 52%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 56%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 60%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 64%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 68%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 72%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 76%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 80%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 84%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 88%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 92%; 
 
} 
 
.student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { 
 
    left: 0%; 
 
    z-index: -1; 
 
}

<div id="batch-1" class="batch-list-item card"> 
 
    <div class="card-title"> 
 
    <h2>Pending Batch</h2> 
 
    </div> 
 
    <div class="card-content"> 
 
    <div class="student-pic-list"> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
     <div class="round-pic student-pic-sm"> 
 
     </div> 
 
    </div> 
 
    <div class="students-count"> 
 
     <p>14 students</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

margini negativi eccetto il primo tipo:

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    background: lavender; 
 
} 
 

 
#container { 
 
    display: -webkit-flex; /* Safari */  
 
    display: flex; 
 
    outline: 1px solid hotpink; 
 
} 
 

 
.inner { 
 
    height: 100px; 
 
    width: 100px; 
 
    margin-left: -50px; 
 
    -webkit-transition: margin-left 0.3s ease; /* Safari */ 
 
    transition: margin-left 0.3s ease; 
 
    border: 2px dashed black; 
 
    box-sizing: border-box; 
 
    background-color: rgba(255, 0, 255, 0.2); 
 
} 
 

 
.inner:first-of-type, #container:hover .inner:first-of-type { 
 
    margin-left: 0; 
 
} 
 

 
#container:hover .inner { 
 
    margin-left: -30px; 
 
} 
 

 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div id=container> 
 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
 
<div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> 
 
</div>