css的position属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

      1.   static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
一、以此为例；基本框架： 
<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
    body{
        border: 1px dashed red;
    }
    #a,#c{
        border: 1px solid red;
        background-color: green;
        height: 100px;
        width: 100px;
    }
    #b,#d{
        border: 1px solid red;
        background-color: yellow;
        height: 100px;
        width: 100px;
    }
    </style>
</head>
<body>
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
</body>
</html>            效果如左下图

          

2，relative ：元素框偏移某个距离（相对于本框位置偏移）。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

添加代码：

#a{
    position: relative;
    top: 40px;
    left: 40px;
} 
#c{
        position: relative;
    top: 50px; 
    left: 50px;
}                 效果变为右上图

      3.     absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

添加代码：

     #a{
        position: absolute;
        top: 40px;
        left: 40px;
    } 
     #c{
        position: absolute;
        top: 50px; 
        left: 50px;
    }                  效果为左下图

          4.     元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

添加代码fixed: 

#a{
        position: fixed;
        top: 40px;
        left: 40px;
    } 
 #c{
    position: fixed;
    top: 50px; 
    left: 50px;
}                      效果与上图一样

    二、  混合    基本框架：

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
    body{
        border: 1px dashed red;
    }
    #a,#c{
        border: 1px solid red;
        background-color: green;
        height: 100px;
        width: 100px;
    }
    #b,#d{
        border: 1px solid red;
        background-color: yellow;
        height: 100px;
        width: 100px;
    }
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"><div id="c">c</div></div>
    <div id="d">d</div>
</body>
</html>                效果如左下图， b框和c框重合了。

             

    1.       父元素为relative  子元素为absolute 

添加代码 

    #b{
        position: relative;
        top: 40px;
        left: 40px;
    }    
    #c{
          position: absolute;
          top: 50px; 
          left: 50px;
    }                                 效果为右上图 b框相对原位置偏移    c相对于b元素偏移

      2.         父元素为absolute  子元素为relative

添加代码

    #b{
        position: absolute;
        top: 40px;
        left: 40px;
    }    
    #c{
          position: relative;
          top: 50px; 
          left: 50px;
    }                  效果如左下图

    

      3.        父元素为relative  子元素为fixed 

添加代码 

    #b{
        position: relative;
        top: 40px;
        left: 40px;
    }    
    #c{
          position:fixed;
          top: 50px; 
          left: 50px;
    }                               效果为右上图       区别一下 父元素为relative  子元素为absolute 
posted @ 2013-06-24 20:23  xiaohong_oath  阅读(402)  评论(1)  编辑  收藏  举报