绝对定位和相对定位的区别（整理）

绝对定位 absolute

设为absolute后元素框从文档流完全删除，所以元素框与文档流无关可以覆盖页面上的其他元素，并相对其包含块定位（包含块：从父包含元素开始往上找起第一个非static方式定位的祖先元素即'absolute', 'relative'or 'fixed'一般用relative因为元素框只设置relative是不会移动的）,不设定left、right、top、bottom则一般处于包含块的左上角。

相对定位 relative （少用）

设为relative的元素，元素框会相对于原本位置偏移，元素仍保留其未定位前的形状，但是它原本所占有的空间仍然保留（注意：left、right、top、bottom不会使其原本占有的空间随元素框移动只有margin、padding才可以，这点处理不好的话会使页面混乱，所以应该少用相对定位）

区别：

• absolute：

  1. 元素相对于包含块偏移
  2. 元素框脱离文档流不会影响文档流内元素的位置，可能会覆盖页面上的其他元素（z-index解决）

• relative：

  1. 元素相对于本身位置偏移
  2. 元素框不会脱离文档流left/right/top/bottom不会使原所占位置随元素框偏移，padding、margin才会，容易使页面混乱，比如影响文档流其他元素的位置。