css的定位position

Title .parent{ width:200px; height:200px; background: red; } .child-one{ width:50px; height: 50px; background: blue; position: absolute; top:10px; right:10px; } .child-two{ width:50px; height: 50px; background: green; }

距离child-one最近的父元素如果没有设置定位样式，则child-one就会相对元素定位。
且此时的child-one脱离文档流，并且child-two后面的元素会占据child-one的位置。
即上述代码的结果图如下：

若对parent设置position:relative属性，则child-two会相对parent的位置进行定位；结果如：

如果把child-one的属性值改为position：relative，则结果图如下：

此时的child-one是相对于自身原来在文档中的位置进行定位，且其后面的元素不会占据child-one的空间位置。即设置position：relative时，元素不会脱离文档流。
还有一重要的知识点见下图：

该图片对应的博客链接为：http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html

总结：
当给当前元素赋予绝对定位属性position：absolute时，首先得给其距离最近的父级元素设置position：relative属性。并且当前元素使用left或right和top或bottom进行绝对定位。

绝对定位（absolute）：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在最上面，可以有负值。

相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。