I have already posted a couple other post regarding the z-index and positioning images - but as I have ran into more problems and have learned some about these rules in CSS I thought I would start a new post with my new problems: I have received some helpful advice, but what I need to know regarding "my" particular setup is something that I haven't been able to "read" about, so I was hoping I could post my current layout and problem. I am using a elastic layout with 1 col, 3 rows (header, content, footer). The container holding all 3 rows (divs), is 44ems wide and centered at the top of the browser window. What I would like is to have a image (355px x 370px) positioned underneith the bottom left corner of the main container. It won't be completely underneith so you can't see it, but the image would stick out to the left and be lower than the container. PROBLEMS: What I have found is that positioning will be based on screen resolution - so even if I line up the image in the right spot for my resolution (e.g. 1280x1024) if viewed on a screen with (e.g. 1600x1200) the image is pulled further down and to the left (obviously based on the browswer window positioning of that resolutions) So how do I make sure the image stays underneith the corner of the container no matter resolution? The other problem is that no matter what positioning I put all the div's (relative : absolute) or what I put the image DIV that I am trying to position (relative : absolute) - when using the Z-index to place the image below (image = z-index: 1) and all other divs (z-index:2) the image is always on top of the container divs. NOTE: the image div is inside the container as well. Any insight and advice on how to make the image stay with the container and why the image insist on staying on top, would be greatly appreciated.
I hope I understand what you want with that image. Seems like you should put a CSS rule of "position: relative" on your main div, then on your image, put CSS rules of "position: absolute; left: -25px; bottom: -25px" (to make it stick out 25px x 25px). As for the z-index, do you have a fixed width for the main container?
I was messing with this and came up with this: <div style="width: 44em; position: relative"> // Supercontainer for the container div and the image <img src="" style="position: absolute; left: -25px; bottom: -25px; z-index: 1;"> // Your image <div style="width: 44em; position: relative; z-index: 2;"> // The main container with the header, body and footer divs (Then of course close them all off.) Seems to work on mine, and it puts the image behind the container (make sure that container has some background so it won't be see-through). So basically, put everything in another container with a relative position, then position both the image and regular container div on top of that, then they'll respond to the same z-index group.