title: How to display a division over other element
body: <p>I'm trying to display a div over a image. When user enters the image the division must display, means on hover effect. But what happens is when I hover the mouse over main division the div displayed under the image. </p>
  
  <p>My code is :</p>
  
  <pre><code> &lt;div class="bgimg"&gt;
   &lt;img width="100%" height="100%" data-id="1" src="data:image/jpeg;"&gt;
   &lt;div id="changeBackPicture" style="display: none;"&gt; 
    &lt;a id="ChangeBAKPicture" href="javascript:void(0)"&gt;Change BackGround Picture&lt;/a&gt;
   &lt;/div&gt;     &lt;-- This division need to display above the image ---&gt;
   &lt;div class="primg"&gt;&lt;/div&gt;
   &lt;div id="uname"&gt;xyz &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>css code :</p>
  
  <pre><code>#changeBackPicture
  {
  float:right;
  margin-top:-70px;
  margin-right:500px;
  width:270px;
  height:35px;
  margin-left:-3px;
  margin-right:-3px;
  }
  </code></pre>
  
  <p>Below picture shows how the division now displaying. I need to display the division over the image...
  <img src="https://i.stack.imgur.com/einN7.jpg" alt="enter image description here"></p>
  
  <p>Please anyone tell me how to do this stuff........ Thanks. ...</p>