positioning a div related to ancestor div (not body)

Discussion in 'CSS' started by bono056, Aug 26, 2010.

  1. #1
    hi
    i have wrapper div, which ancestor of all my objects in page, now i want to set position of a div inside it, but when i position it with top, left, browser set position related to body, not wrapper div.
    my code is like this, i want to red box position be in the x,y=20 related to wrapper, not body. any help?
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <DIV id="wrapper" style="width: 950px;height:500px;margin: 0 auto;text-align: right;border:1px solid #000000;">
    <div id="header" style="float:none;width: 100%; margin: 0 auto;height:50px; background-color:#CCC">
    Header
    </div>
    <div id="content" style="float:none;width: 100%; margin: 0 auto;height:400px; background-color:#0F0">
    Body
    </div>
    <div id="header" style="float:none;width: 100%; margin: 0 auto;height:50px; background-color:#FCC">
    Footer
    </div>
    
    <div id="on-the-fly" style="width:50px;height:150px; background-color:red; z-index:10; position:absolute; top:20px;left:20px; position:absolute">
    </div>
    
    </DIV>
    </body>
    </html>
    
    Code (markup):

     
    bono056, Aug 26, 2010 IP
  2. Asgeco

    Asgeco Member

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    You need to set position:relative to your wrapper div.
     
    Asgeco, Aug 26, 2010 IP