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):