在 CSS 中，position 属性是控制网页元素布局的核心。它决定了元素在文档流中的定位方式，通常需要配合 top、right、bottom、left 等边偏移属性来实现精确的位置摆放。
position 属性共有五种常见的取值，具体用法与特性如下：
1. static（静态定位）
- 特性 ：这是元素的默认定位方式。元素完全遵循正常的标准文档流进行排列（从上到下，从左到右）。
- 用法 ：在这种模式下，设置
top、left等偏移属性是无效的，且无法使用z-index调整层级。通常不需要手动书写，仅在需要重置其他定位样式时使用。
2. relative（相对定位）
- 特性 ：元素相对于其自身原始位置进行偏移。它最大的特点是"不脱离文档流"，即移动后原来占据的空间依然保留，不会影响其他元素的布局。
- 用法：常用于微调元素的位置（如实现上标文字），或者作为绝对定位子元素的参照容器（创建定位上下文）。
css
.box {
position: relative; /* 相对自身原位置 */
top: 20px; /* 向下移动 20px */
left: 30px; /* 向右移动 30px */
}3. absolute（绝对定位）
- 特性 ：元素会完全脱离文档流 ，不再占据原有空间。它的定位参照物是"最近的已定位祖先元素"（即
position不为static的父级元素）；如果没有找到这样的祖先，则相对于<html>或浏览器视口定位。 - 用法 ：常配合父级的
relative使用（俗称"子绝父相"），适用于制作弹窗、下拉菜单、图标点缀以及复杂的悬浮布局。
css
.parent { position: relative; } /* 父级提供参照 */
.child {
position: absolute;
right: 20px;
bottom: 20px; /* 相对于父级右下角定位 */
}4. fixed（固定定位）
- 特性 ：同样会脱离文档流，但它的参照物始终是浏览器可视窗口（视口） 。无论页面如何滚动，该元素都会固定在窗口的指定位置不动。
- 用法：非常适合用于制作顶部固定导航栏、侧边悬浮客服按钮、回到顶部按钮等。
css
.nav {
position: fixed;
top: 0;
left: 0; /* 始终固定在屏幕左上角 */
width: 100%;
}5. sticky（粘性定位）
- 特性 ：可以看作是
relative和fixed的结合体。在页面滚动时，它会先表现为相对定位；当滚动到达指定的阈值时，就会像fixed一样"粘"在视口中固定不动。 - 用法 ：必须至少设置一个偏移量 （如
top: 0）才能生效。常用于实现列表吸顶导航、分区标题固定、表格表头固定等效果。
css
.sticky-header {
position: sticky;
top: 0; /* 距离视口顶部 0px 时开始吸顶 */
background: #fff;
}💡 核心扩展：层叠顺序（z-index）
当多个定位元素发生重叠时，可以通过 z-index 属性来控制它们的上下堆叠顺序。需要注意的是，只有非 static 定位的元素，z-index 才会生效 。z-index 的值越大，元素显示越靠上层。