The problem isn’t so simple (as you would probably imagine), take the following example:
The HTML:
Text text text <div id="special-image"></div> special content More text text text text...
How I would like the output to look like:
As you can see the #special-image is “hovering” over the content without touching it.
I know the first thing that comes to mind is position:absolute;
But as you can see in the example image, I want those divs to be position:relative to the
area where they are setted (in the html). And the x,y positions can vary from page
to page (they are not consistent).
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.
What would you suggest I should do in-order to achieve this kind of behavior?
Thanks in advance.
Edit:
This is one step closer (thanks to @Ross McLellan),
But the newly created divs are pushing the content:
http://jsbin.com/isepow/1/
And I need an image instead of the orange background.
I suppose it can be achieved with some negative margin if you know the width of the image/image holder
Not working in IE7…
Not Working in Chrome…
Alternative solution if an extra wrapper is allowed:
Outer wrapper holds the position absolute style. Which allows special-image to move relatively without impacting the rest of the page
EDIT
Possibly fixed the IE7 isssues with using margins. Not sure why but it was the fact they were on a
<div>, using a span instead and it looks happy (without moving any of the other text as far as I can see on my test)