relative 相对定位：相对于本身的位置进行偏移。
absolute 绝对定位：相对于非static的祖先元素进行位置偏移，当这样的元素不存在，则相对于根级容器定位。
经验告诉我们：当一个元素使用relative定位而使位置发生改变时，其他的定位依赖于它的元素的位置不会改变，就好像这个元素没有改变位置一样。而当一个元素使用absolute根据父元素而位置发生改变时，位置受它影响的其他元素的位置也会相应地发生改变，就好像这个元素被删除了一样。
示例代码：
<style> .father1{ height: 400px; 400px; background-color: antiquewhite } .cld1-1{ height: 100px; 100px; background-color: pink; position: relative; left: 50px; top: 30px; } .cld1-2{ height: 100px; 100px; background-color: yellowgreen; } .father2{ height: 400px; 400px; background-color: bisque; /* position属性的值主要有relative、absolute、fixed、static */ /* 父级元素的position只要不是static，就可以用来被子元素使用absolute来相对它定位 */ position: fixed; } .cld2-1{ height: 100px; 100px; background-color: brown; position: absolute; left: 20px; top: 20px; } .cld2-2{ height: 100px; 100px; background-color: coral } </style> </head> <body> <div class="father1"> <!-- 子元素cld1-1采用相对定位，其他子元素（cld1-2)的位置不发生改变 --> <div class="cld1-1"></div> <div class="cld1-2"></div> </div> <div class="father2"> <!-- 子元素cld2-1采用绝对定位，其他子元素的位置将发生改变（按cld2-1不存在来定位） --> <div class="cld2-1"></div> <div class="cld2-2"></div> </div> </body>