3 zdjęcia na sobie w HTML/CSS

Question

Witam

Tworzę swoją stronę i chciałbym w 1 miejscu nałożyć na siebie 3 zdjęcia. Pewnie jest to dziwne, ale 1 zdjęcie to taki mały szablon, 2 zdjęcie to koło zębate, które będzie się obracało, a 3 zdjęcie to narzędzia ;). 

Jak poprawnie zdjęcia na siebie nałożyć, aby były wycentrowane względem niebieskiego boxa? 

Próbowałem zrobić box na relative oraz 1 zdjęcie czyli inz na relative to ładnie się wycentrowało. Natomiast problem jest z następnymi zdjęciami. Dziwnie przesuwają się w różne miejsca, nie chcą się centrować, a chce je umieścić w tym szablonie (1 zdjeciu) jeden na drugim. Jak polecacie to zrobic? zdjęcie strony na dole. 

html:

<div class="box2">
                <center><img src="images/inz1.png" class="inz"></center>
                <img src="images/GEAR2.png" class="engineer">
                <img src="images/tools.png" class="tools">
</div>

 CSS:

.box2{
    position: relative;
    flex: 2;
    background: blue;
}

inz{
    position: relative;
    height: 300px;
}
.engineer{
    position: absolute;
    height: 140px;
    top: 0;
    margin: auto;
    width: auto;
}

.tools{
    position: absolute;
    height: 220px;
    display: block;

    margin-left: 0;
    margin-right: 0;
}

Answer 1

Zrób głównego div z position relative. Jego dzieci maja position absolute i możesz użyć funkcje translate do przesunięcia ich

Comments

U mnie jakies dziwne rzeczy się dzieją. Jak dodaje głównego diva to usuwa mi całego niebieskiego boxa...

teraz mam box niebieski na relative a zdjecia na absolute i wychodzi coś takiego:

<div class="box2">
                <img src="images/inz1.png" class="inz">
                <img src="images/GEAR2.png" class="engineer">
                <img src="images/tools.png" class="tools">
            </div>

CSS:

.box2{
    position: relative;
    flex: 2;
    background: blue;
}


.tools{
    height: 100px;
    position: absolute;
}


.inz{
    position: absolute;
    height: 300px;
}
.engineer{
    position: absolute;
    height: 140px;
    top: 0;
    margin: auto;
    width: auto;
    -webkit-animation: spin 2.5s linear infinite;
    -moz-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
    
}