0

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:

enter image description here

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.

3
  • If you make the parent element relatively positioned, and the image-elements absolutely positioned, the images will be positioned in relation to the parent instead of the entire page. If that is what you mean...? Jul 26, 2012 at 16:59
  • No, the main point is that the text in the page should stay where it was. and that #special-image should hover over them without "interrupting".
    – funerr
    Jul 26, 2012 at 17:01
  • That is achievable. See my answer. Absolutely positioned images will not interfere with the text. Jul 26, 2012 at 17:03

3 Answers 3

2

I suppose it can be achieved with some negative margin if you know the width of the image/image holder

Not working in IE7...

<div>Text text text <div id="special-image" style="display: inline-block; position: relative; top: -15px; left: -15px; width: 40px; margin-right: -40px; background-color: #ff6600;">&nbsp;</div> special content More text text text text... </div>

Not Working in Chrome...

<div>Text text text <div id="special-image" style="position: absolute; margin-top: -15px; margin-left: -5px; width: 40px; background-color: #ff6600;">&nbsp;</div> special content More text text text text... </div>

Alternative solution if an extra wrapper is allowed:

<div>Text text text <div style="position: absolute; display: inline;"><div id="special-image" style="display: inline-block; position: relative; top: -15px; left: -15px; width: 40px; background-color: #ff6600;">&nbsp;</div></div> special content More text text text text... </div>

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)

Text text text<span id="special-image" style="position: relative; top: -15px; left: -15px; display: inline-block; width: 40px; margin-right: -40px; background-color: #ff6600;">&nbsp;</span> special content More text text text text...
5
  • Actually, just edited as I saw what I had done didn't work well in IE7. It now uses position absolute so that #special-image doesn't impact the rest of the text but by omitting top/left/right/bottom styles it stays where it is on the page. Negative margin top/left can then be used to manipulate it's position as desired. The previous example I had there used position relative to manipulate the position and a negative margin-right so #special-image didn't impact the rest of the text but as I say IE7 wasn't happy with doing that. Jul 26, 2012 at 17:14
  • No, there is a problem, It "pushes" the top row of text and the bottom one, I want the div to not affect the page in anyway( not moving the elements down).
    – funerr
    Jul 26, 2012 at 17:21
  • And then see what I had doesn't now work in chrome. Am sure either option just needs some tweaking though to fix whatever I have done wrong. Will also add another option which is possible if you're allowed a wrapper around #special-image? Jul 26, 2012 at 17:21
  • You can try another wrapper but remember the text must stay in it's original position.
    – funerr
    Jul 26, 2012 at 17:23
  • Great. Knew we'd get there in the end :-) Jul 26, 2012 at 21:52
0

For me it is not clear what defines the position of the two images. If the images shall be close to the special content text put this text together with the images in a seperate div. Then you can position the images relative to their parent div.

1
  • What if there is no parent div?
    – funerr
    Jul 26, 2012 at 17:11
0

Like this ?

div#special-image{position:absolute;top:-5px; display:inline-block;}​

See this as proof of concept ;-)

3
  • No, I don't want it absolute positioned because it will move the #special-image to top:-5px (of the document) I want it to hover over the text.
    – funerr
    Jul 26, 2012 at 17:05
  • @agam360 If the parent div has a position:relative (see the proof in my post) it would be relative to that div
    – XhkUnlimit
    Jul 26, 2012 at 17:05
  • Sorry I mislead you, I've edited my code, I don't have that div there(your container), sorry it just won't work without it.
    – funerr
    Jul 26, 2012 at 17:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.