relative、fixed、absolute 和 static 四种定位有什么区别？

1. relative、fixed、absolute 和 static 四种定位

1. Relative（相对定位）：

• 相对定位通过设置 position: relative; 来实现。
• 相对定位相对于元素在文档流中的初始位置进行定位。
• 可以使用 top、right、bottom 和 left 属性来相对于原始位置进行偏移。
  -相对定位不会使元素脱离文档流，其他元素仍然以相对定位元素的原始位置进行布局。

2. Fixed（固定定位）：

• 固定定位通过设置 position: fixed; 来实现。
• 固定定位使元素相对于视口（浏览器窗口）进行定位。
• 可以使用 top、right、bottom 和 left 属性来指定元素相对于视口的偏移位置。
• 固定定位的元素不会占据文档流中的空间，不受页面滚动的影响。

3. Absolute（绝对定位）：

• 绝对定位通过设置 position: absolute; 来实现。
• 绝对定位使元素脱离文档流，并相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则- - 相对于初始包含块（通常是浏览器窗口）进行定位。
• 可以使用 top、right、bottom 和 left 属性来指定元素相对于其定位参考点的偏移位置。
• 绝对定位的元素不会占据文档流中的空间，其他元素会忽略它的位置。

4. Static（静态定位）：

• 静态定位是元素的默认定位方式，通过设置 position: static; 来实现，通常不需要显式设置。
• 静态定位下，元素按照文档流的顺序进行排列，不受定位属性的影响。
• top、right、bottom 和 left 属性对静态定位的元素没有效果。

2. 区别

1. static（默认定位）：元素的默认定位方式。在静态定位下，元素按照文档流的顺序进行排列，不受定位属性的影响。top、right、bottom 和 left 属性对静态定位的元素没有效果。

2. relative（相对定位）：相对定位相对于元素在文档流中的初始位置进行定位。通过设置 top、right、bottom 和 left 属性，可以相对于元素原本的位置进行偏移。相对定位不会使元素脱离文档流，其他元素仍然以相对定位元素的原始位置进行布局。

3. absolute（绝对定位）：绝对定位使元素脱离文档流，并相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。通过设置 top、right、bottom 和 left 属性，可以指定元素相对于其定位参考点的偏移位置。绝对定位的元素不会占据文档流中的空间，其他元素会忽略它的位置。

4. fixed（固定定位）：固定定位使元素相对于视口（浏览器窗口）进行定位，即使页面滚动也不会改变其位置。通过设置 top、right、bottom 和 left 属性，可以指定元素相对于视口的偏移位置。固定定位的元素不会占据文档流中的空间，其他元素会忽略它的位置。

总结：

• static 是默认定位，元素按照文档流排列，不受定位属性影响。
• relative 相对于元素原本位置进行定位，不脱离文档流。
• absolute 相对于最近的已定位祖先元素进行定位，如果没有则相对于初始包含块定位，脱离文档流。
• fixed 相对于视口进行定位，即使页面滚动也不会改变位置，脱离文档流。