简单明了易懂的关于CSS中的position relative 和 absolute的区别

时间：2010-10-04 来源：wee

最近在布局的时候，经常被relative和absolute困扰，常常得不到所要的效果。查阅了网上很多文章，看到最后还是懵懵懂懂的。最后自己想了一下，却给解决了。我理解的规律很简单，要理解relative和absolute的区别，我们先理解一下文本流。只需要记住：relative的偏离是相对于他应该所处的原位置。（但是还是不太习惯用relative,最近做的一个站http://www.xuexi010.com/就尽量避免用这个属性，感觉不靠谱）

比如说：

      .div1
        {
            position:relative;
            top:50px;
            left:100px;
            width:600px;
            border:solid 1px #000000;
        }

      .div2
        {
            width:200px;

            background:blue;
        }
         .div3
        {
            width:200px;

            background:green;
        }

                <div class="div1">
                    <div class="div2">static</div>
                    <div class="div3">relative</div>
               </div>

div3添加relative之前，按照文本流定义，div3应该在div2的下面，两者左右都是对齐的，如图一：

图一

注：黑边框的层为div1

那么div3 加上relative 和top left后：

       .div3
        {
            width:200px;

            background:green;
            position:relative;
            top:50px;
            left:50px;
        }

div3（绿）应该处于离div2（蓝）下边缘和左边缘各50px，即与原位置相比，偏离原位置上、左边缘各50px。如图二