在设置position:relative和position:absolute,可以激活元素的left、top、right、bottom和z-index属性(默认情况下是无效的)。
网页是有带z轴的二维结构,默认为z-index:0;这一层的。元素自己的display类型、长宽、内外边距等属性排列在z-index:0,这一层,此为文档流。
在设置position:relative或position:absolute会让元素浮现,即z-index>0;但是position:relative会保留在z-index:0层。
position:relative:相对于自身位子的偏移;(元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了)
position:absolute:相对于祖先对象窗口的偏移,若祖先对象无position,则以body对象进行定位。(元素就脱离了文档)
relative和absolute都是以祖先对象为偏移的,只不过偏移的位子不一样。如果一个元素绝对定位后,其参照物是以离自身最近元素是否设置了相对定位,如果有设置将以离自己最近元素定位,如果没有将往其祖先元素寻找相对定位元素,一直找到html为止。
position:fixed;始终以body对象进行定位,是特殊的absolute;
position:static;按正常的文档流进行排列
position:absolute和float会隐式的改变display类型(display:none除外),元素会以display:inline-block的方式显示,元素设置为display:inline或block,仍旧无效。