CSS定位position属性使用技巧，Relative， Absolute， Fixed 和 Sticky详解
想要元素脱离常规流，固定在某个位置，或随着滚动而悬停？position属性是你的不二之选。
本文将深入剖析Relative， Absolute， Fixed 和 Sticky四种定位方式，并通过实例详解其应用场景。
一、定位概述
position属性用于指定元素的定位方法，配合top, right, bottom, left属性进行精确位置控制。
二、五种定位值详解
-
static（静态定位）- 默认值。元素处于正常的文档流中。
top,right,bottom,left属性无效。
- 默认值。元素处于正常的文档流中。
-
relative（相对定位）- 元素相对于其正常位置进行偏移。
- 它原本在文档流中的空间会被保留，不会影响其他元素。
.box { position: relative; top: 20px; /* 从原位置向下移动20px */ left: 30px; /* 从原位置向右移动30px */ } -
absolute（绝对定位）- 元素脱离正常文档流，其原有空间不再被保留。
- 它相对于最近的非
static定位的祖先元素进行定位。如果找不到，则相对于初始包含块（通常是<html>）。
.parent { position: relative; } /* 为 .child 创建定位上下文 */ .child { position: absolute; top: 0; right: 0; } -
fixed（固定定位）- 元素脱离正常文档流，其定位相对于浏览器视口。
- 即使页面滚动，它也会停留在屏幕的固定位置。常用于导航栏、弹窗、返回顶部按钮。
.navbar { position: fixed; top: 0; width: 100%; } -
sticky（粘性定位）- 是
relative和fixed的结合。元素在跨越特定阈值前为相对定位，之后为固定定位。 - 必须指定
top,right,bottom,left中的一个阈值才生效。非常适合做滚动时吸顶的标题。
.section-title { position: sticky; top: 0; /* 当元素滚动到视口顶部0px处时，变为固定定位 */ background-color: white; } - 是
三、z-index属性
当定位元素发生重叠时，z-index控制它们的堆叠顺序。值越大，元素越靠上。
- 注意：
z-index只对定位元素（position值非static）起作用。
四、总结
position是实现精确布局和复杂UI效果（如模态框、悬浮按钮）的关键。理解每种定位的参考坐标系是正确使用的核心。