title: Relative div hovering with css
body: <p>The problem isn't so simple (as you would probably imagine), take the following example:</p>
  
  <p><strong>The HTML:</strong></p>
  
  <pre><code>Text text text &lt;div id="special-image"&gt;&lt;/div&gt; special content More text text text text... 
  </code></pre>
  
  <p><br />
  How I would like the <strong>output</strong> to look like:</p>
  
  <p><img src="https://i.stack.imgur.com/Nvxwr.png" alt="enter image description here"></p>
  
  <p>As you can see the #special-image is "hovering" over the content without touching it.<br />
  I know the first thing that comes to mind is <code>position:absolute;</code><br />
  But as you can see in the example image, I want those divs to be <code>position:relative</code> to the<br /> area where they are setted (in the html). And the x,y positions can vary from page<br /> to page (they are not consistent).<br /></p>
  
  <p><strong>The text in the page should stay "anchored" in the page, I can't give it absolute positions. The main point is that I don't want the #special-image div to move any of the text and just hover there.</strong></p>
  
  <p>What would you suggest I should do in-order to achieve this kind of behavior?</p>
  
  <p>Thanks in advance.</p>
  
  <p><br />
  <strong>Edit:</strong><br />
  This is one step closer (thanks to @Ross McLellan),<br />
  But the newly created divs are pushing the content:<br />
  <a href="http://jsbin.com/isepow/1/" rel="nofollow noreferrer">http://jsbin.com/isepow/1/</a>
  <br /> And I need an image instead of the orange background.</p>