CSS常见的四种定位

1.相对定位

相对定位就是相对于元素原本的位置来移动

position：relative

可以使用top、bottom、right、left来控制元素的移动
特点：

• 相对定位是不脱离文档流的，原先位置还继续保留
• 同一个方向上的定位属性只能使用一个，比如left和right只能使用一个
• 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
• 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

2. 绝对定位

绝对定位就是相对于body来定位

position:absolute

特点：

• 脱离文档流，原先位置不保留
• 默认定位元素，无论有没有祖先元素，相对于body定位
• 祖先设置了定位，相对于祖先元素定位（遵循就近原则），子绝父相

3. 固定定位

position:fixed

特点：

• 脱离文档流 原先位置不保留
• 相对于浏览器视口区域

4. 粘滞定位

position:sticky

特点：

• 不脱离文档流
• 没有达到阈值前是相对定位，达到阈值后就是固定定位