css相对定位与绝对定位的理解

通过在逆战班三周的学习对css相对定位和绝对定位的了解:
CSS定位position相对定位（relative）和绝对定位（absolute）
position用于设置对象的定位方式：
1.static，无特殊定位（静态的默认值）。
2.relative:相对定位
特点：占位，相对于自身原有位置进行偏移，仍处于标准文档流中，其依据top,bottom,left,right,z-index等属性进行位置偏移。
理解：对于某一元素设置了相对定位后，首先这个元素会跟其他元素一样，出现在文档流中它应该出现的位置，然后我们可以通过以上的五个属性，对它设置水平或垂直偏移量，使这个元素相对于它在文档流的起始位置进行偏移。
不会脱离文档流，空间是会被保留的，不影响其他元素的布局。
注：在使用相对定位时，元素虽然被偏移了，但它的起始位置仍被占据着。
例:设置三个浮动的块


给第二块使用相对定位,position:relative;top:20px;left:50px;得到下图:

3.绝对定位：absoiute
特点：不占位，将对象从文档流中拖出，通过width、height、left、right、top、bottom等属性与margin、padding、border进行绝对定位。绝对定位的元素可以有边界，但这些边界不压缩。其层叠关系通过z-index属性定义。

例：


给第二块使用绝对定位，position：absolute;top:-50px;left:-20px;如下图：