<!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>无标题文档</title> <style> body{ margin:0; padding:0; color:#ccc; background-color:#333; } #left{ position:absolute; top:0; left:0; margin:20px; padding:10px; border:5px solid #ccc; background:#666; width:120px; } #middle{ margin:20px 190px; padding:10px; border:5px solid #ccc; background:#666; } #right{ position:absolute; top:0; right:0px; margin:20px; padding:10px; border:5px solid #ccc; background:#666; width:120px; } </style> </head> <body> <div id="left"> <p>1</p> </div> <div id="middle"> <pre> #left { position: absolute; top: 0px; left: 0px; margin: 20px; padding: 10px; border: 5px solid #ccc; background: #666; 150px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; 120px; } html>body #left { 120px; /* ie5win fudge ends */ } #middle { margin: 20px 190px 20px 190px; padding: 10px; border: 5px solid #ccc; background: #666; } #right { position: absolute; top: 0px; right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */ margin: 20px; padding: 10px; border: 5px solid #ccc; background: #666; 150px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; 120px; } html>body right { 120px; /* ie5win fudge ends */ } </pre> <div align="right"><p><a href="css/03_3column.css">[full css]</a></p></div> </div> <div id="right"> <p>1</p> </div> </body> </html>
设置position:absolute的元素是从文档中移去的（left和right的div都不占空间），为什么middle会显示在中间？
因为
margin:20px 190px;
设置了距左边和右边都是190。
为了证明position:absolute不占空间，可以在div id="left"后面增加一个div，看到div是直接显示在左上角的。
显示如下：
http://www.thenoodleincident.com/tutorials/box_lesson/basic3.html