...

View Full Version : Absolute positioned div



spetsacdc
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>
</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

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

If I understood your question correctly, these should help...
http://www.west-wind.com/Weblog/posts/293520.aspx
http://stopdesign.com/archive/2003/09/03/absolute.html
http://css-tricks.com/absolute-positioning-inside-relative-positioning/

drhowarddrfine
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>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<body>
<div>
<div style="height:0;width:0;position:relative;overflow auto">
<div><img style="position:absolute;" src="a.jpg">
</div>
</div>
</div>
</body>

</body>
</html>

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum