Могу ли я складывать элементы с перекрытием, используя чистый CSS?

Question

Возможно ли разместить неизвестное количество элементов в контейнере, чтобы оно выглядело сложным, когда этот контейнер недостаточно велик? Я пытаюсь сделать это только с HTML и CSS.

Вот как это выглядит, если родитель больше детей.

Вот что я пытаюсь достичь, когда есть больше детей, оккупационные родителей (цвет заливки, чтобы показать порядок наложения):

Некоторые вещи, которые я посмотрел на, но была нет удачи (возможно, я что-то пропустил или просто не так хорошо):

1. Счетчик CSS - работает только для контента erty
2. Вложение детей div друг в друга (как Inception)
3. CSS Flexbox - это только Обертывания или сжимают

Вот вид от того, что я пытаюсь сделать: http://codepen.io/vickyleong/pen/VaPBYg. Попробуйте изменить размер окна.

ПРИМЕЧАНИЕ: Дети квадраты, но укладываются с перекрытием, как каскад

Я использую Sass, но вот мой код только с HTML и 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

отрицательные поля, за исключением первого типа:

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>