CSS相对定位与绝对定位

相对定位

position : relative ;
特点：

1. 如果没有定位偏移量，对元素本身没有任何影响；
2. 不使元素脱离文档流，空间是会被保留；
3. 不影响其他元素布局；
4. left、top、right、bottom是相对于当前元素自身进行偏移的。

代码：

初始效果为三个方形并列向下，对box2添加了相对定位，box2相对于本身left: 100px，发生位移后，box2实际占位为偏移前的原位置而非显示位置；
运行效果：

绝对定位

position : absolute ;
特点：

1. 使元素完全脱离文档流；
2. 使内联元素支持宽高 （让内联具备块特性）；
3. 使块元素默认宽根据内容决定（让块具备内联的特性）；
4. 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）；
   注：如果祖先元素中有多个元素具备定位模式，那么是以离自己最近的祖先元素进行偏移。

初始代码：

初始效果：
当有定位祖先元素时，
代码：

对box2添加了绝对定位，对box2的祖先元素box1添加了相对定位，则box2相对于其祖先元素box1进行偏移， left: 10px; top: 10px;
运行效果：

当祖先元素中有多个元素具备定位模式时，
代码：

当祖先元素box1和body都具备定位模式时，box2是以离自己最近的祖先元素box1进行偏移， left: 20px; top: 20px;
运行效果：

当没有定位祖先元素时
代码：

对box2添加的绝对定位，此时没有定位祖先元素，box2相对于整个文档产生偏移
left: 0; top:0; 因此box2处于整个文档的左上角；
运行效果：

相对定位与绝对定位的区别

1. relative相对定位是占位的，当有left、right、top、bottom等属性发生使其产生偏移时，实际占位为偏移前的原位置而不是显示位置；
2. absolute绝对定位是不占位的，不会影响其他元素位置。

定位和浮动的区别

浮动：解决左右排列的问题
定位：解决叠加排列的问题

逆战班2020