position:relative和position:absol

1.定位的定义

• static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
• relative(相对定位) 对象不脱离文档流，参考自身静态位置通过 top bottom left right 定位，并且可以通过z-index进行层次分级。
• absolute(绝对定位) 脱离文档流，通过 top bottom left right （简称TRBL）定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
• fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素，可通过z-index进行层次分级。

2.相对定位（使元素位移）

当我们给对象1设置了相对定位及TRBL以后，该对象出现以下变化：

• 提高层叠级别（z-index增加），高于文本流；
• 相对原位置A点向右位移left大小的距离；
• 相对原位置A点向下位移top大小的距离；
• 保留原来的位置。

结果：原来的默认定位对象2位置不变，对象1覆盖了对象2的内容、可以看出，相对定位会保留原始位置，即对象1内容脱离文档流，但是位置不会脱离文档流。可以理解为对象1虽然搬家了，但是老家的房子没有卖掉，依然在。

相对定位

3.绝对定位（定位到任意位置）

如果说相对定位是搬家不卖房，那么绝对定位是搬了家以后把原来的房子卖掉了。完全脱离文档流成为自由体。
当我们给对象1设置了绝对定位及TRBL以后，该对象出现以下变化：

• 提高层叠级别（z-index增加），高于文本流；
• 相对原位置A点向右位移left大小的距离；
• 相对原位置A点向下位移top大小的距离。
• 删除原来位置。

结果：对象1绝对定位移动后让出了原来的位置，原来的默认定位对象2位置上移。

绝对定位

参考资料：详解定位与定位应用