spetsacdc
02-15-2009, 05: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>
</div>
</div>
</div>
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.
Thanks
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>
</div>
</div>
</div>
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.
Thanks