How to put a image below another?
<p>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</p>

<p>html </p>

<pre><code>&lt;img src="images/2.jpg" style="position:absolute;"&gt;
&lt;img src="images/1.png"  style="position:absolute;"&gt;
</code></pre>

<p>CSS</p>

<pre><code>img {
top: 50%;
left: 50%;
max-width: 480px;
width: 100%;
height: auto;
transform: translate(-50%, -50%);
display: block; 

}
</code></pre>

<p><strong>Edit</strong>: this is my problem <a href="https://jsfiddle.net/50crfe10/" rel="nofollow">https://jsfiddle.net/50crfe10/</a>
As you can see, their are 2 images, but only 1 appear. because one is above another.</p>