shooting’s sky

一个朋友问过我css的定位属性中，absolute与relative到底有什么区别？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？但是他们绝对和相对又是参照什么基点来的呢？

position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT是个属性(简称TRBL)进行定位，在没有设定TRBL，默认依据父级的坐标原始点为基点(注意，仅仅是父级，而不是祖父级、曾祖父级。。)，如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角作为基点参照TRBL属性进行定位，此时对象不再具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。

position:relative; 他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位，此时对象不可层叠，即设置z-index属性无用。