title: how to show img behind text with :hover?
body: <p>i have a div with a text with a link inside. after that text div, i have a div with an img. now, i want that when i :hover the link the img spawns behind the text. when the img div is in the text div container it works, but then it spawns over the text.</p>
  
  <p>html</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="text"&gt;
  text with a &lt;a id="link"&gt;hover me link&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="pic"&gt;
  &lt;img src="pic.jpg"/&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #text {
      position: absolute;
      z-index:2;
      }
  
  #pic {
      display:none;
      position:fixed;
      top:10px;
      left:20px;
      z-index:1;
  }
  
  #link:hover ~ #pic {
      display:block;
  }
  &lt;/style&gt;
  </code></pre>