CSS Position 定位

学习 static/relative/absolute/fixed/sticky · 难度：进阶 · +15XP

CSS Position 定位详解

position 属性是 CSS 布局的核心之一，控制元素在页面上的定位方式。搭配 top、right、bottom、left 和 z-index 使用，可以实现各种精确的布局效果。

五种定位方式

值	描述	是否脱离文档流
`static`	默认值，按正常文档流排列	否
`relative`	相对于自身原位置偏移	否（保留原占位）
`absolute`	相对于最近的已定位祖先定位	是
`fixed`	相对于浏览器视口定位，不随滚动	是
`sticky`	滚动到阈值前为 relative，之后为 fixed	否

relative — 相对定位

元素相对于其原本在文档流中的位置进行偏移，但原来的空间仍然保留，不会影响其他元素的布局。

.box {
  position: relative;
  top: 20px;    /* 向下移动 20px */
  left: 30px;   /* 向右移动 30px */
}

absolute — 绝对定位

元素脱离正常文档流，相对于最近的已定位祖先元素（position 不为 static）进行定位。如果不存在这样的祖先，则相对于 <body> 定位。

.container {
  position: relative;  /* 作为定位参照 */
}
.child {
  position: absolute;
  top: 0;
  right: 0;           /* 固定在容器右上角 */
}

fixed — 固定定位

相对于浏览器视口定位，即使页面滚动也不会改变位置。常用于固定导航栏、回到顶部按钮等。

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
  color: white;
  z-index: 1000;  /* 确保在最上层 */
}

sticky — 粘性定位

结合了 relative 和 fixed 的特性。元素在滚动到指定阈值前表现为相对定位，超过阈值后固定不动。

.sticky-header {
  position: sticky;
  top: 0;    /* 滚动到顶部时粘住 */
  background: white;
}

z-index 层级控制

当元素发生重叠时，z-index 决定谁在上方。数值越大越靠上（仅对已定位元素有效）。

z-index 只对 position 不为 static 的元素生效
数值可以取正整数、零或负整数
同级元素中，后出现的元素默认覆盖先出现的
父元素的 z-index 会创建新的层叠上下文

常见应用场景

模态弹窗：使用 position: fixed 配合半透明背景遮罩
下拉菜单：父元素 relative，下拉内容 absolute
角标/徽章：容器 relative，角标 absolute 置于角落
固定工具栏：使用 position: sticky 实现

综合示例

<div class="card" style="position:relative;">
  <img src="photo.jpg" alt="商品图片">
  <span style="position:absolute;top:10px;right:10px;
    background:red;color:white;padding:4px 8px;border-radius:4px;">
    热卖
  </span>
  <h3>商品名称</h3>
</div>

掌握 position 定位是 CSS 布局的基础功。在实际开发中，往往需要组合使用多种定位方式来实现复杂的页面布局。