css中的相对定位和绝对定位

正常情况下，position属性的值默认为static，元素出现在正常的文档流中，元素没有偏移属性，也就是说给元素设置的left,right,bottom,top这些偏移属性都是没有效果的。

• 相对定位

对某元素设置相对定位，这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置。当我们设置它的水平或垂直偏移量时，它会相对于它在文档流中的位置进行移动。

三个浮动的块，第二个块是设置相对定位position:relative，这时跟其它两个块一样都处在正常的文档流中。

当给设置了position:relative的第二块元素设置一个偏移left:50px ; top:30px，可以发现第二块元素相对它本身的位置进行了偏移，但是它原来所占据的位置空间依然存在（原来位于文档流中的位置仍然会存在），不会被第三块浮动过来填补掉，也不会把别的块从文档流中原来的位置挤开。如果偏移设置为百分数，是相对父元素的宽高而言的。

• 绝对定位

父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推。如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口）。

 

上图是没有使用绝对定位时的结果，按照上图标记给第二个子元素设置绝对定位，然后设置一个偏移right:150px;bottom:40px

在设置偏移量的时候，也可以设置负值。