<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server"> <title></title> <style type="text/css"> body,ul,div,li { padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; } #container { width:300px; height:300px; background-color:#efefef; position:relative; border:1px solid #000000; } #left { float:left; position:absolute; border:1px solid #ff0000; bottom:23px; left:0px; right:80px; } #right { float:right; position:absolute; border:1px solid #ff0000; right:10px; bottom:23px; } #bottom { width:100%; height:23px; border:1px solid #ff0000; bottom:0px; position:absolute; left:0px; } .text { border:1px solid #000000; width:100%; margin:2px 2px 2px 2px; position:absolute; bottom:0px; } /*button 不用绝对地位，在手机浏览器上将会错位*/ .button { border:1px solid #000000;margin:2px 2px 2px 2px; position:absolute; bottom:0px; right:0px; } </style> </head> <body> <div id="container"> <div> <div id="left"><input type="text" class="text"/></div> <div id="right"><input type="button" value="button" class="button"/></div> </div><div id="bottom"></div>
</div></body>
</html>总结：1. 绝对定位的元素脱离了文档流，所以紧跟其后的元素将不会依次以此元素来布局。2. 相对定位是相对于自己的原始位置（指position为static时，这个元素在文档流中本来的位置）来说的。文档流是从左往右，从上到下。3.absolute是相对于父元素。
相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。