title: Display buttons over image with Display:Block property
body: <p>I have an image displayed on the center of the page using this CSS code:</p>
  
  <pre><code>      .img{
          display: block;
          margin-left: auto;
          margin-right: auto;
          position:relative;
           }
  
        .btn{
         position:absolute;
         margin-top:10%;
         margin-left:-27%;
           }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;img src="12345.png" class="img"&gt;&lt;/img&gt;
          &lt;a href="http://google.ro"&gt;&lt;img src="pin.png" class='btn' width="30px" height="48px" alt="http://google.ro" &gt;&lt;/img&gt;&lt;a&gt;
          &lt;a href="http://google.ro"&gt;&lt;img src="pin.png" class='btn1' width="30px" height="48px" alt="http://google.ro" &gt;&lt;/img&gt;&lt;a&gt;
          &lt;a href="http://google.ro"&gt;&lt;img src="pin.png" class='btn2' width="30px" height="48px" alt="http://google.ro" &gt;&lt;/img&gt;&lt;a&gt;
  </code></pre>
  
  <p>How can I make the 3  tags which are also images display over the image? It worked just fine before  I added  <i>display:block</i>. </p>