css的定位

static（静态定位）
这是所有 HTML 元素的默认定位方式。
特点：元素完全遵循正常的文档流布局，不受 top、bottom、left、right 和 z-index 属性的影响。
使用场景：普通的段落、列表等无需特殊定位的元素，通常不需要显式声明。
relative（相对定位）
元素相对于其自身在文档流中的原始位置进行偏移。
特点：
不脱离文档流：元素偏移后，它在原始位置占用的空间依然保留，不会影响周围其他元素的布局。
微调与参照：常用于对元素位置进行微调，或者作为绝对定位子元素的“父容器”（即经典的“子绝父相”布局技巧）。
使用场景：图标与文字对齐、创建定位上下文、实现微小的 hover 动画等。
absolute（绝对定位）
元素完全脱离文档流，相对于其最近的已定位（非 static）祖先元素进行定位。如果找不到这样的祖先，则相对于浏览器窗口（视口）定位。
特点：
脱离文档流：元素不占据任何空间，可能导致其他元素重叠。
尺寸变化：绝对定位的盒子默认宽度由内容决定（变为行内块特点）。
使用场景：弹出层、下拉菜单、消息通知小红点、图片上的文字标签等需要精准悬浮的元素。
fixed（固定定位）
元素完全脱离文档流，位置始终相对于浏览器窗口（视口）固定。
特点：无论页面如何上下滚动，元素的位置都不会发生改变。
使用场景：固定导航栏、页面右下角的“回到顶部”按钮、悬浮客服按钮、模态对话框等。
sticky（粘性定位）
这是一种混合定位，结合了 relative 和 fixed 的特点。
特点：在跨越特定阈值（如 top: 0）之前，它表现为相对定位；当滚动超过该阈值后，它会变为固定定位。注意：必须设置 top、right、bottom、left 中的至少一个阈值才能生效。