View Full Version : Absolute positioned div

02-15-2009, 06:26 AM
I have a div "container" that has auto left and right margins so it is centered on the page. I want to have another div ("image") z-index'ed to appear on top of the container. I need to have "image" absolutely positioned and placed inside the container so that it moves with the container when the page is resized.

The problem is that the "image" div adds to the size of the "container" (even though image has z-index to make it appear on top of the container). I can fix the problem by giving "image" a negative top and left margin equal to its height and width. However, is there another way of fixing this?

I thought I got close by making "image" absolutely positioned, inside a new div that was relative to container" such as:

pseudo code:

<div container>
<div position relative width and height = 0 overflow auto>
<div image position absolute z-index 1>

This didn't add size to container because the new div didn't have any size. However, the image wasn't displayed because it was outside of the new div's size. I made the new div overflow auto, but it still didn't show the image.


02-15-2009, 07:24 AM
Please use the code tag.

If I understood your question correctly, these should help...

02-15-2009, 04:03 PM
Maybe I don't understand but I see the image just fine. Which browser are you talking about?

<!doctype html>
<style type="text/css">
<div style="height:0;width:0;position:relative;overflow auto">
<div><img style="position:absolute;" src="a.jpg">


02-15-2009, 05:12 PM
Thank you both. The problem was that the <div container> had overflow hidden. :thumbsup: