Hi All, I was trying a simple example on CSS Absolute Positioning. As we know absolute position element is positioned relative to the first parent element that has a position other than static. In my case which is the div element.. Now if you look at paragraph two which is displaced should it not be outside the div border since it contains top: -10px; in css?. This I thought will push it 10 pixels above the border of div since we position relative to the first parent element. <?xml version="1.0" ?> <!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" lang="en" xml:lang="en"> <head> <title>Absolute Positioning</title> <link rel="stylesheet" type="text/css" href="ch08_eg29.css" /> </head> <body> <div class="page"> <p>Here is paragraph <b>one</b>. This will be at the top of the page.</p> <p class="two">Here is paragraph <b>two</b>. This will be in the middle of the page.</p> <p>Here is paragraph <b>three</b>. This will be at the bottom of the page.</p> </div> </body> </html> Code (markup): /* Style sheet for absolute positioning */ body { color:#000000; background-color:#ffffff; font-family:arial, verdana, sans-serif; font-size:12px;} div.page { position:absolute; left:50px; top: 100px; padding:20px; border-style:solid; border-width:2px; border-color:#000000;} p { background-color:#FFFFFF; width:200px; padding:5px; border-style:solid; border-color:#000000; border-width:2px;} p.two { position:absolute; left:50px; top: -10px;} Code (markup): Thanks, Hemanth
Please review the following code. You need to set the margin for paragraph to be 0px . p { background-color:#FFFFFF; width:200px; padding:5px; border-style:solid; border-color:#000000; border-width:2px;} Code (markup): It should be p { background-color:#FFFFFF; width:200px; margin:0px; padding:5px; border-style:solid; border-color:#000000; border-width:2px;} Code (markup):