本次博客只描述相对定位（position:relative）和绝对定位（position:absolute）的区别。
接下来我将用“生动鲜明”的语言来描述这两个定位的区别。
1、绝对定位（absolute）
（1）定义：
绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。
（2）”生动鲜明“的定义：
利用一个div来解释。假如把div看成一个人，开起了绝对定位，就脱离文档流，相当于身体和灵魂都游走了起来，原位置不占空间。
2、相对定位（relative）
（1）定义：
相对位置的坐标参考系是以自己上一次的位置（x，y）作为原点（0，0）。
注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
（2）”生动鲜明“的定义：
还是利用一个div来解释。假如把div看成一个人，开起了相对定位，相当于身体还在原位置，灵魂游走了起来，原位置和灵魂移动的位置都被占用。
下面利用代码展示一下：
绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位</title> <style> body { margin: 0; height: 2000px; } .box { width: 400px; height: 400px; background-color: lightskyblue; /* 如果只开启定位, 不设置偏移量的话 -> 保持在原有位置不动 * 开启绝对定位的元素, 是脱离文档流的 */ position: absolute; left: 100px; top: 100px; } .child { width: 100px; height: 100px; background-color: magenta; position: absolute; left: 400px; } </style> </head> <body> <!-- 如果设置为绝对定位的元素的父级元素是<body>元素的话, 该元素就是相对于HTML页面进行定位 --> <div class="box"> <!-- 如果设置为绝对定位的元素的父级元素不是<body>元素的话: * 父级元素没有开启定位, 该元素就是相对于HTML页面进行定位 * 父级元素同时开启定位, 该元素就是相对于父级元素进行定位 --> <div class="child"></div> </div> </body> </html>
效果图如下：
相对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>相对定位</title> <style> body { margin: 0; padding: 0; } #box1 { width: 200px; height: 200px; background-color: indianred; margin-left: 200px; margin-top: 200px; /* 相对定位: 相对当前元素原本的位置; 是不脱离文档流的 */ position: relative; top: 200px; } #box2 { width: 200px; height: 200px; background-color: indigo; position: absolute; left: 200px; top: 200px; } </style> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>
效果图：
