overlay images over images in a footer with css - css

Question

So i have a footer containing 8 images (4 buttons and 4 icons) the idea is to display each of the 4 icons over the respective button. If I use position:relative , they are just displayed one near the other, so 8 images separated, while it has to look like there are only 4 images.
This is what I want to get:
This is what I get instead:
My css:
.absolute {
position: absolute;
}
#footer {
position: fixed;
bottom: 0;
width: 90%;
height: 10%;
-webkit-transform: translate(-50%, -50%);
left: 50%;
display: flex;
justify-content: space-between;
}
#footer img {
height: 100%;
}
my html:
<div id="footer">
<img class="absolute" src="img/back.png" />
<img src="img/empty_circle_button.png" />
<img class="absolute" src="img/gems_btn.png" />
<img src="img/empty_circle_button.png" />
<img class="absolute" src="img/up.png" />
<img src="img/empty_circle_button.png" />
<img class="absolute" src="img/missions.png" />
<img src="img/empty_circle_button.png" />
</div>
I also need this to be valid in a webview. Any suggestion on what's wrong here?

Answer 1

Ok I found the solution by myself:
HTML:
<div id="footer">
<div><img src="img/back.png" /></div>
<div><img src="img/gems_btn.png" /></div>
<div><img src="img/up.png" /></div>
<div><img src="img/missions.png" /></div>
</div>
CSS:
#footer {
position: fixed;
bottom: 0;
width: 90%;
height: 10%;
-webkit-transform: translate(-50%, -50%);
left: 50%;
display: flex;
justify-content: space-between;
}
#footer div {
background-image: url(../img/empty_circle_button.png);
background-size: contain;
height: 100%;
background-repeat: no-repeat;
}
#footer div img {
height: 100%;
}