<!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 runat="server">
<title></title>
<style type="text/css">
body,ul,div,li
{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
#container
{
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
{
100%;
height:23px;
border:1px solid #ff0000;
bottom:0px;
position:absolute;
left:0px;
}
.text
{
border:1px solid #000000;
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是相对于父元素。
相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。