绝对定位与相对低位的应用

<!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
    {
        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是相对于父元素。

 相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

posted @ 2012-02-14 17:39  落叶潇潇雨  阅读(265)  评论(0)  编辑  收藏  举报