How overlay two pictures to another using HTML-CSS?
<p>I searched for a few hours and I don't find solution to my problem.</p>

<p>I would like to overlay two pictures to another, despite the tens of tutorials about this, I don't arrive to apply to my case.</p>

<p>I was able to see through these tutorials, CSS has a atribut "z-index" that allows to in the background images.
I also could see the absolute and relative position property but I'm not sure the solution to my problem is related to these properties.</p>

<p>here is the part of the code where i would like a solution of my problem:</p>

<pre><code>&lt;img src='schema.png'&gt;
&lt;a href="#"&gt;&lt;img src='Linkedin.png' width="30" height="30" &gt;&lt;/a&gt;
&lt;a href="#"&gt;&lt;img src='twitter.png' width="30" height="30"  &gt;&lt;/a&gt; 
</code></pre>

<p>here is my full html code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
 &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;link rel="stylesheet" href="menuStyle.css" /&gt;
    &lt;title&gt;Antoine&lt;/title&gt;
 &lt;/head&gt;
&lt;body&gt;
    &lt;div id="bloc_page"&gt;
        &lt;header&gt;
            &lt;div id="titre_principal"&gt;
                    &lt;h1&gt;Titre&lt;/span&gt;&lt;/h1&gt;    
                    &lt;h2&gt;Sous titre&lt;/h2&gt;
                    &lt;br&gt;
            &lt;/div&gt;
        &lt;/header&gt;
        &lt;ul id="nav" style="clear:both;"&gt;
                &lt;li&gt;&lt;a href="#"&gt;menu 1 ?&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;menu 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;menu 3&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;menu 4&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
            &lt;img src='schema.png'&gt;
            &lt;a href="#"&gt;&lt;img src='Linkedin.png' width="30" height="30" &gt;&lt;/a&gt;
            &lt;a href="#"&gt;&lt;img src='twitter.png' width="30" height="30"  &gt;&lt;/a&gt; 
        &lt;ul id="footer"&gt;
            &lt;br&gt;
                &lt;li&gt;&lt;a href="#"&gt;Plan du site&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Mentions légales&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Nous contacter&lt;/a&gt;&lt;/li&gt;
        &lt;ul&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p></p>

<p>Thank you in advance for your help.</p>