DIV定位，position属性

来源：互联网发布：数据港公司怎么样编辑：程序博客网时间：2024/05/18 03:00

DIV定位，position属性

absolute ：绝对定位

位置相对离元素最近父级文档流的左上角，会脱离文档流，飘起来。

配合top、right、bottom、left使用。

有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其position是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body（文档流）或者html元素。标准是说只需要指定left和right，width可以自动根据容器宽度计算出来

示例：

[html] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
    <head>  
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>  
        <title>DIV+CSS</title>  
          
        <style type="text/css">  
            div{  
                width:300px;  
                height:300px;  
            }  
            .div1{  
                background:#ccc;  
                position:absolute;  
                left:30px;  
                top:50px;  
                /*z-index:-1;*//*设置为-1时，div1就会在div2的下面。*/  
            }  
            .div2{  
                background:red;  
            }  
        </style>  
    </head>  
    <body>  
        <div class="div1">这是div1,当设置position为absolute时，div1会飘起来。相对于最近父级文档流。</div>  
        <div class="div2">这是div2，当div1飘起来时，div2会移动到div1的位置。</div>  
    </body>  
</html>  

relative ：相对定位
位置相对于自己的当前位置，不会脱离文档流，
不会飘起来。
配合top、right、bottom、left使用。

如：设置top为10px，div会移动到距离自己当前top位置10px的位置。

relative 就是相对元素static（正常默认）定位时的位置进行偏移，如果指定static时top是50象素，

那么指定relative并指定top是10象素时，元素实际top就是60象素了。

示例：

[html] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
    <head>  
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>  
        <title>DIV+CSS</title>  
          
        <style type="text/css">  
            div{  
                width:300px;  
                height:300px;  
            }  
            .div1{  
                background:#ccc;  
                position:relative;  
                left:30px;  
                top:50px;  
                /*z-index:-1;*//*设置为-1时，div1就会在div2的下面。*/  
            }  
            .div2{  
                background:red;  
            }  
        </style>  
    </head>  
    <body>  
        <div class="div1">这是div1,当设置position为relative时，div1会相对于自己默认的位置进行移动。</div>  
        <div class="div2">这是div2，当div1移动时，div2不会移动到div1的位置。</div>  
    </body>  
</html>  

fixed ：固定定位，fixed才是真正的绝对定位。

位置相对于浏览器。

配合top、right、bottom、left使用。

其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，

也就是说永远可以看到，这个做一些彩单的时候可以用。

示例：

[html] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
    <head>  
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>  
        <title>DIV+CSS</title>  
          
        <style type="text/css">  
              
            .div1{  
                background:#ccc;  
                position:fixed;  
                bottom:10px;  
                right:100px;  
                /*z-index:-1;*//*设置为-1时，div1就会在div2的下面。*/  
            }  
        </style>  
    </head>  
    <body>  
        <div class="div1"><a href="#">回到顶部></a></div>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
        <p>测试position属性fixed。</p>  
    </body>  
</html>  

static：静态定位

就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定。

relative,absolute,fixed需要指定具体位置
relative,absolute,fixed如果不指定它的top,left等属性，

那么它的position实际上依然是static。

使用了relative,absolute,fixed就必须指定具体的位置。

部分内容摘自：http://javapub.iteye.com/blog/733471

0 0