title: How overlay two pictures to another using HTML-CSS?
body: <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>