KC Here KC Here - 5 months ago 9
CSS Question

How to put a image below another?

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 https://jsfiddle.net/50crfe10/
As you can see, their are 2 images, but only 1 appear. because one is above another.

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="https://scontent-sin.xx.fbcdn.net/v/t1.0-0/s480x480/13432215_784505675021945_898862369521210510_n.png?oh=1600b007c6bc56ad2a9e72c5978166b5&oe=5802FEB3">
    <img class="two" src="https://scontent-sin.xx.fbcdn.net/v/t1.0-9/13423946_783982808407565_3306592852780950589_n.png?oh=1131478aac319f301c563d020ed8214e&oe=57C2C4DE">
</body>