I know their are a lot of similar questions, but non of those fixed my problem. How to put a image below another with x px gap? This is my code
html
<img src="images/2.jpg" style="position:absolute;">
<img src="images/1.png" style="position:absolute;">
CSS
img {
top: 50%;
left: 50%;
max-width: 480px;
width: 100%;
height: auto;
transform: translate(-50%, -50%);
display: block;
}
Edit: this is my problem As you can see, their are 2 images, but only 1 appear. because one is above another.
1 Answer
Just remove position:absolute if your ok with it and also remove transform property
img {
max-width: 480px;
width: 100%;
height: auto;
display: block;
margin:20px auto;
}<body>
<img class="one" src="">
<img class="two" src="">
</body>
