CSS Position（定位）

position 决定元素如何在文档中定位：是否脱离正常流、相对于谁偏移。配合 top / right / bottom / left 可以精确控制元素的位置，常用于层叠、悬浮、固定栏等效果。

position 的取值

值	说明
static	默认，正常流，忽略 top/right/bottom/left
relative	相对自身原位置偏移，仍占原位置空间
absolute	相对最近「定位祖先」定位，脱离正常流
fixed	相对视口定位，脱离正常流，滚动时不动
sticky	在阈值内像 relative，超过后像 fixed

---

1. static（默认）

• 元素按正常文档流排列。
• 设置的 top、right、bottom、left、z-index 无效。

---

2. relative（相对定位）

• 元素仍占原来的空间，再根据 top/right/bottom/left 相对自身原位置偏移。
• 其它元素布局时仍按它「没偏移前」的位置算，所以会留下空白。

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

常用于：微调位置，或作为 absolute 子元素的「定位参考」（见下）。

---

3. absolute（绝对定位）

• 元素脱离正常流，不再占位。
• 位置由 top / right / bottom / left 决定，相对于最近一个 position 不为 static 的祖先（即「定位祖先」）；若没有，则相对初始包含块（通常是视口）。
• 常把父元素设为 position: relative，再让子元素 position: absolute，这样子元素就相对父元素定位。

.parent {
  position: relative;  /* 作为子元素的定位参考 */
  width: 300px;
  height: 200px;
}

.child {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

---

4. fixed（固定定位）

• 相对视口定位，脱离正常流。
• 滚动页面时，元素位置不变，适合做「固定顶栏」「固定侧边栏」「固定弹窗」等。

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

---

5. sticky（粘性定位）

• 在「未滚过阈值」时表现像 relative（仍占位）；滚过阈值后像 fixed，相对视口固定。
• 通过 top（或 bottom 等）设定「粘住」时的位置。

.nav {
  position: sticky;
  top: 0;   /* 滚到顶部时粘在视口顶部 */
  background: white;
  z-index: 10;
}

注意：父元素不能有 overflow: hidden，否则 sticky 可能失效。

---

top / right / bottom / left

• 对 relative：相对自身原位置偏移。
• 对 absolute / fixed：相对其定位参考（定位祖先或视口）的对应边。
• 单位可用 px、em、%、等。同时设 left 和 right 可间接定宽度（需配合 width 或留空让浏览器算）。

---

z-index（层叠顺序）

当多个定位元素重叠时，z-index 数值大的在上层。仅对 position 不为 static 的元素有效。

.modal {
  position: fixed;
  z-index: 1000;
}

---

小结

• static：默认，正常流。
• relative：相对自身偏移，仍占位；常作 absolute 的参考。
• absolute：相对定位祖先定位，脱离流。
• fixed：相对视口，滚动不动。
• sticky：滚动到阈值后「粘」在视口。
• 定位后用 top/right/bottom/left 设位置，用 z-index 控制谁在上层。

下一节学习 CSS Overflow：内容溢出时的裁剪与滚动。