CSS相对定位与绝对定位

1.相对定位

Position : relative ;

特点：

1 如果没有定位偏移量，对元素本身没有任何影响；

2 不使元素脱离文档流，空间是会被保留；

3 不影响其他元素布局；

4 left、top、right、bottom是相对于当前元素自身进行偏移的。

代码：

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

运行效果：

2.绝对定位

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处于整个文档的左上角；

运行效果：

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

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

2. absolute绝对定位是不占位的，不会影响其他元素位置。

4.定位和浮动的区别

浮动：解决左右排列的问题

定位：解决叠加排列的问题

逆战班2020