position relative和absolute区别

看这个博客 说的很详细http://blog.sina.com.cn/s/blog_647a022e0101b2gn.html

总的来说 这两个属性都是通过增加left和right偏离原来的位置  但是relative仍然保留了原先位置的占位  但是absolute没有 原先位置不占位其他元素会补上

最主要的区别 看原文这句话

对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位

意思就是说 absolute的移动  是基于 含有relative OR absolute 属性的父元素

在看到原文这句话   如果红色背景层定位为absolute，则情形如图4：

红色的直接父元素是绿色的static  该元素没有absolute OR relative 属性  在往上一级  黄色的DIV是离红色元素最亲近的含有 absolute OR relative 的父元素

因此 top left 等属性值是在黄色DIV基础上偏移的

转载于:https://www.cnblogs.com/cart55free99/p/3514095.html