代码
<!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> <title>absolute属性</title> <style type="text/css"> body { margin: 20px; font-family: Arial; font-size: 12px; } #father { background-color: #a0c8ff; border: 1px dashed #000000; padding: 15px; position: relative; } #father div { background-color: #fff0ac; border: 1px dashed #000000; padding: 10px; } #block2 { position: absolute; top: 0px; right: 0px; } </style> </head> <body> <div id="father"> <div>Box-1</div> <div id="block2">Box-2</div> <div>Box-3</div> </div> </body> </html>
说明
relative是相对于浏览器定位的，absolute是相对于relative定位的。
它们都要结合top、right、left、bottom属性来使用。
代码
<!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> <title>absolute属性</title> <style type="text/css"> body { margin: 20px; font-family: Arial; font-size: 12px; } #father { background-color: #a0c8ff; border: 1px dashed #000000; padding: 15px; position: relative; top:20px; /*相对于浏览器*/ left:10px; } #father div { background-color: #fff0ac; border: 1px dashed #000000; padding: 10px; } #block1 { position: absolute; top: 0px; right: 0px; } #father2 { background-color: #a0c8ff; border: 1px dashed #000000; padding: 15px; position: relative; top:10px; /*相对于浏览器，不过基于现有的位置。*/ } #father2 div { background-color: #fff0ac; border: 1px dashed #000000; padding: 10px; } #block2 { position: absolute; top: 0px; right: 0px; } </style> </head> <body> <div id="father"> <div>Box-1</div> <div id="block1">Box-2</div> <div>Box-3</div> </div> <div id="father2"> <div>Box-1</div> <div id="block2">Box-2</div> <div>Box-3</div> </div> </body> </html>
说明
absolute永远是基于父relative元素定位。relative基于现有的位置，基于浏览器定位。
本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/4998426.html，如需转载请自行联系原作者
