штабелирования некоторые изображения

Question

На моем коде я пытаюсь быть в состоянии складывать изображения как

Где есть 2 изображения позади и один на вершине.

Я попытался с помощью поплавков и Z-индекс

Вопрос как я могу получить его, так что мои изображения, как в приведенном выше примере?

РАБОТА DEMO < - Обновлено с рабочим раствором

<div class="container"> 
<div class="row"> 

<div class="col-lg-12"> 
<img data-src="holder.js/50px320?theme=social" class="img-thumbnail img-1"> 
<img data-src="holder.js/50px320?theme=lava" class="img-thumbnail img-2"> 
<img data-src="holder.js/50px320?theme=grey" class="img-thumbnail img-3"> 
</div> 

</div> 
</div> 

CSS

.img-1 { 
    z-index: 2; 
    float: none; 
    clear: both; 
} 

.img-2 { 
    float: left; 
    z-index: 1; 
} 

.img-3 { 
    float: right; 
    z-index: 1; 
} 

Answer 1

Вот еще одно решение:

.img-1 { 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 30px; 
 
    z-index: -1; 
 
} 
 

 
.img-2 { 
 
    display: block; 
 
    position: absolute; 
 
    top: 30px; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 

 
.img-3 { 
 
    display: block; 
 
    position: relative; 
 
    z-index: 1; 
 
    margin: 0 auto; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-12"> 
 
     <img data-src="holder.js/50px320?theme=social" class="img-thumbnail img-1"> 
 
     <img data-src="holder.js/50px320?theme=lava" class="img-thumbnail img-2"> 
 
     <img data-src="holder.js/50px320?theme=grey" class="img-thumbnail img-3"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Избавьтесь от поплавки и очищает, так что вы можете использовать position свойство. Установите контейнер в относительное позиционирование и установите изображения в абсолютное позиционирование.

.container { 
 
    postion: relative; 
 
} 
 
.img-1 { 
 
    position: absolute; 
 
    left: 40%; 
 
    top: 0; 
 
    z-index: 2; 
 
} 
 
.img-2 { 
 
    position: absolute; 
 
    left: 20%; 
 
    top: 50px; 
 
    z-index: 1; 
 
} 
 
.img-3 { 
 
    position: absolute; 
 
    left: 60%; 
 
    top: 50px; 
 
    z-index: 1; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-12"> 
 
     <img data-src="holder.js/50px320?theme=social" class="img-thumbnail img-1"> 
 
     <img data-src="holder.js/50px320?theme=lava" class="img-thumbnail img-2"> 
 
     <img data-src="holder.js/50px320?theme=grey" class="img-thumbnail img-3"> 
 
    </div> 
 
    </div> 
 
</div>

Примечание:z-index работает только на расположенные элементы (позиции: абсолютное, относительное положение: или позиции: фиксированный).