3.5css定位

CSS 定位是布局控制的核心，理解不同定位类型及其相互作用对于实现复杂页面效果至关重要。

---

一、定位类型概览

CSS 定位机制通过 position 属性定义，主要包括 5 种类型：

类型	默认值	定位参考对象	特殊行为
static	默认	正常文档流	不影响布局，元素按顺序排列
relative	relative	自身原始位置（偏移计算基准）	元素可偏移，但占据原空间
absolute	absolute	最近非 static 祖先/body	脱离文档流，需父级定位上下文
fixed	fixed	视口（Viewport）	滚动时位置固定，计算包含块为视口
sticky	sticky	视口（默认）或指定祖先	滚动时在阈值内保持相对定位，超出后变为固定

---

二、定位类型详解

1. 静态定位 (static)

• 特点：默认行为，元素按文档流顺序排列，top/right/bottom/left 无效。

• 使用场景：普通内容布局，无需特殊定位时。

.static {
  position: static; /* 可省略 */
  top: 10px; /* 无效 */
}

1. 相对定位 (relative)

• 特点：

  • 元素位置基于自身原始位置偏移。

  • top/left 向右/下偏移，bottom/right 向左/上偏移。

  • 不脱离文档流，仍占据原空间，后续元素可能覆盖。

• 典型应用：微调元素位置（如按钮悬浮效果）、作为绝对定位的父容器。

.parent {
  position: relative;
  height: 200px;
  background: #eee;
}
.child {
  position: relative;
  top: 20px;
  left: 30px;
  background: red;
}

1. 绝对定位 (absolute)

• 关键点：

  • 脱离文档流，不占据原空间，需父级提供定位上下文（即父元素需设置 position: non-static）。

  • 偏移量基于最近的非 static 祖先元素，若无则相对于参考点为视口（window）或 body（取决于浏览器兼容性）

  • 常用于弹窗、侧边栏等需精确定位且不干扰主布局的元素。

.dropdown-menu {
  position: absolute;
  top: 100%; /* 垂直居中需结合 transform */
  left: 50%;
  transform: translateX(-50%);
}

1. 固定定位 (fixed)

• 核心特性：

  • 视口锚定，无论页面如何滚动，元素位置固定。

  • 计算包含块为视口，滚动时元素位置不变。

• 典型场景：导航栏、返回顶部按钮、固定表头。

.fixed-nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

1. 粘性定位 (