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. 区别
-
static（默认定位）：元素的默认定位方式。在静态定位下，元素按照文档流的顺序进行排列，不受定位属性的影响。top、right、bottom 和 left 属性对静态定位的元素没有效果。
-
relative（相对定位）：相对定位相对于元素在文档流中的初始位置进行定位。通过设置 top、right、bottom 和 left 属性，可以相对于元素原本的位置进行偏移。相对定位不会使元素脱离文档流，其他元素仍然以相对定位元素的原始位置进行布局。
-
absolute（绝对定位）：绝对定位使元素脱离文档流，并相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。通过设置 top、right、bottom 和 left 属性，可以指定元素相对于其定位参考点的偏移位置。绝对定位的元素不会占据文档流中的空间，其他元素会忽略它的位置。
-
fixed（固定定位）：固定定位使元素相对于视口（浏览器窗口）进行定位，即使页面滚动也不会改变其位置。通过设置 top、right、bottom 和 left 属性，可以指定元素相对于视口的偏移位置。固定定位的元素不会占据文档流中的空间，其他元素会忽略它的位置。
总结：
- static 是默认定位，元素按照文档流排列，不受定位属性影响。
- relative 相对于元素原本位置进行定位，不脱离文档流。
- absolute 相对于最近的已定位祖先元素进行定位，如果没有则相对于初始包含块定位，脱离文档流。
- fixed 相对于视口进行定位，即使页面滚动也不会改变位置，脱离文档流。
)
