Absolute pos image inside div doesn't work

zackw

Don't know why.

In every css tutorial you can find you see something like this:

.container {
position:relative;
}

.subblock {
position:absolute;
top:20px;
left:20px;
}

And it works fine (for them). But it doesn't seem to work when using an image.

The img just jettisons itself to the top of the screen, outside and far away from the container block.

I've messed around with all the display modes and tried using more and more sub divs and doing google searches on this. I really need to absolute position an img to a div.

In fact, what I really need to do is absolute position TWO images inside a div and use z-index to put one image over the other. Or in other words, using the <img> tag (can't use background images) I need one image over the top of another, but inline to the document inside my layout divs.

Any ideas? I must be missing something.

Weedpacket

Works for me:

<html><head><title></title><style xml:base="/" type="text/css" id="webdeveloper-edit-css-style-0">.container {
position:relative;
}

.subblock {
position:absolute;
top:20px;
left:20px;
}</style></head><body><div style="height: 100px; width: 100px; background-color: red;">&nbsp;</div>
<div class="container" style="background-color: green; height: 100px; width: 100px;">&nbsp;<img class="subblock" src="" alt="boink" style="background-color: blue; height: 20px; width: 20px;"></div></body></html>

rulian

When an element is absolute positioned it's position becomes independent of ANY parent object. So if your absolute positioned image is inside a relative div tag, the image's position will be relative to the BODY and not to the DIV , in your case 20 top and 20 left from the top left of the browser screen. if you need to position it relative to the div use relative positioning.

zackw

Absolute position is not independent of "any" parent. If the parent is set to relative positioning, it will be absolute positioned to that parent, or so it should be.
I don't know why mine was so screwy, I rewrote it like 5 times. I guess I'll start over and try again. I created a new file just to test this and finally got it working, now need to try it in the main site, perhaps it's some other css getting in the way, will have to look through it.

Weedpacket

rulian wrote:
in your case 20 top and 20 left from the top left of the browser screen

That's what went through my head at first, but then I remembered that that is what "position:fixed" is for.

nrg_alpha

@OP: To be pedantic, an element that is absolutely positioned is positioned relative to its nearest positioned ancestor.. should there be no positioned ancestor, the element in question will be positioned in relation to the initial containing block, which depending on the user agent, will be the 'canvas' or HTML element.

Therefore, if the div containing the image does not have any css position declarations, it is not considered the image's positioned ancestor. As a result (as Rulian explained), your HTML element will be where the absolute positioned element is based off of.

Also note that unlike position:relative, absolute positioning takes the element in question out of the flow of things.. that is to say that all the elements that follow after the element being absolutely positioned within the document behaves as thought that absolute positioned element was never there. This can cause some confusion for the uninitiated.