Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    92
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Smile Absolute positioned div

    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

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Maybe I don't understand but I see the image just fine. Which browser are you talking about?
    Code:
    <!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>

  • #4
    New Coder
    Join Date
    Mar 2008
    Posts
    92
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Thank you both. The problem was that the <div container> had overflow hidden.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •