title: Positioning over image and under image
body: <p>Good day. I have a code:</p>
  
  <pre><code> &lt;div style=\"position:relative;height:auto;padding:5px;float:left;\"&gt;
   &lt;img id=\"avimg\" src=".$uinfo["avatar_url"]."&gt;&lt;p id=\"act-await\" style='position:absolute;top:13px;left:24px;'&gt;&lt;i id=".$uinfo['id']." class=\"icon-checkmark\" onclick=\"accfr(this.id);\"&gt;&lt;/i&gt;&lt;br&gt;&lt;i id=".$uinfo['id']." onclick=\"decfr(this.id);\" class=\"icon-cancel-2\"&gt;&lt;/i&gt;&lt;/p&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>    #avimg:hover {
  opacity:0.3;
   -moz-opacity:0.3; 
   filter:alpha(opacity=40);
  }
  #act-await {
      display:none;
  }
  #avimg:hover + #act-await {
      display:block;
  }
  </code></pre>
  
  <p>All works. But I need a link under an image. When I make this, block #act-await not showing (when mouse over).</p>
  
  <pre><code> &lt;div style=\"position:relative;height:auto;padding:5px;float:left;\"&gt;
   &lt;img id=\"avimg\" src=".$uinfo["avatar_url"]."&gt;&lt;br&gt;&lt;a href=\"\"&gt;&lt;font size=\"1\"&gt;".$uinfo['name']. "&lt;br&gt;".$uinfo['surname']."&lt;/font&gt;&lt;/a&gt;
   &lt;p id=\"act-await\" style='position:absolute;top:2px;text-align:center;'&gt;&lt;i id=".$uinfo['id']." class=\"icon-checkmark\" onclick=\"accfr(this.id);\"&gt;&lt;/i&gt;&lt;br&gt;&lt;i id=".$uinfo['id']." onclick=\"decfr(this.id);\" class=\"icon-cancel-2\"&gt;&lt;/i&gt;&lt;/p&gt;
   &lt;/div&gt;
  </code></pre>