首页 › CSS › 布局 › 定位

position 属性控制元素在文档流中的定位方式。

五种定位

/* 默认：正常文档流 */
.static     { position: static; }

/* 相对自身原本位置偏移 */
.relative   { position: relative; top: 10px; left: 20px; }

/* 相对于最近的定位祖先 */
.absolute   { position: absolute; top: 0; left: 0; }

/* 相对于视口 */
.fixed      { position: fixed; bottom: 20px; right: 20px; }

/* 滚动到阈值前 = relative，超过后 = fixed */
.sticky     { position: sticky; top: 0; }

值	定位依据	特点
static	默认	正常文档流
relative	自身	占位保留，偏移不影响其他元素
absolute	最近的非 static 祖先	脱流，top/right/bottom/left 定位
fixed	视口 viewport	脱流，滚动时不移动
sticky	滚动容器 + 视口	混合 relative + fixed

absolute 定位

<div class="parent" style="position: relative;">
  <div class="child" style="position: absolute; top: 0; right: 0;">
    右上角
  </div>
</div>

⚠️ 重要：父元素必须有 position: relative（或 absolute/fixed/sticky），否则子元素 relative 定位会相对于包含块（通常是视口）偏移。

/* 全屏覆盖层 */
.overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /* 填满最近的定位祖先 */
}

fixed 定位

/* 回到顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 100;
}

/* 固定导航栏 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
/* body 需要 padding-top 补偿 fixed 占据的高度 */

sticky 定位

/* 滚动时粘在顶部 */
.section-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

/* 多层 sticky 实现层级封面效果 */

z-index

z-index 控制层叠顺序（仅对定位元素生效）：

.z1 { position: relative; z-index: 1; }
.z2 { position: relative; z-index: 2; }  /* 在 z1 上方 */

层叠上下文

某些属性会创建新的层叠上下文，内部的 z-index 只能在上下文内部比较：

/* 创建层叠上下文的常见方式 */
.card { position: relative; z-index: 1; }      /* ✅ relative + z-index */
.card { opacity: 0.9; }                        /* ✅ opacity < 1 */
.card { transform: scale(0.5); }               /* ✅ transform */
.card { filter: blur(1px); }                   /* ✅ filter */
.card { isolation: isolate; }                  /* ✅ 显式创建 */

小结

定位	参照	脱流
static	正常流	❌
relative	自身	❌
absolute	定位祖先	✅
fixed	视口	✅
sticky	滚动容器	混合
z-index	层叠上下文内比较	—

上一节：Grid 进阶与 subgrid 下一节：浮动与多列布局

贡献者: 布欧-Lewyon