何雨果的知识库

Appearance

CSS 定位：static、relative、absolute 与 fixed ​

CoreCSS Layout

CSS position 属性控制元素在页面上的 放置方式。配合 top、right、bottom、left 属性，可以精确控制元素的位置。

一、📍 四种定位方式总览 ​

值参照物是否脱离文档流使用场景
static无（默认文档流）❌默认行为，无需手动设置
relative元素自身的 原始位置❌微调位置、作为 absolute 的定位容器
absolute最近的已定位祖先 或页面左上角✅精确放置叠加元素
fixed浏览器视口✅固定导航栏、悬浮按钮

二、📄 Static（静态定位） ​

css
div {
  position: static;  /* 默认值，可省略 */
}
  • 是所有元素的 默认 定位方式
  • 元素按照正常文档流排列（从上到下、从左到右）
  • top、right、bottom、left 属性 不生效

三、↔️ Relative（相对定位） ​

css
div {
  position: relative;
  top: 50px;     /* 从原始位置向下偏移 50px */
  left: 50px;    /* 从原始位置向右偏移 50px */
}

核心特点 ​

特点说明
参照物元素 自身原来应在的位置（默认文档流位置）
文档流仍然占据原始空间，不影响其他元素的布局
偏移方向top: 50px = 从顶部 向下 推 50px

常见误解

"Relative" 不是相对于 其他元素，而是相对于 自己的默认位置。

使用场景 ​

  1. 微调元素位置：在默认位置基础上做小幅调整
  2. 作为定位容器：为内部的 absolute 定位子元素提供参照

四、📌 Absolute（绝对定位） ​

css
.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

核心特点 ​

特点说明
参照物最近的已定位祖先（设置了 position: relative/absolute/fixed 的祖先）
无定位祖先时参照 页面左上角 (<html> 元素)
文档流脱离文档流，不占据原始空间，其他元素会忽略它

定位容器模式 ​

要让 absolute 相对于特定祖先定位，必须 显式 给祖先设置 position：

css
/* 父容器 */
.parent {
  position: relative;  /* 成为定位容器 */
}

/* 子元素 */
.child {
  position: absolute;
  top: 50px;           /* 相对于 .parent 顶部偏移 */
  left: 50px;          /* 相对于 .parent 左侧偏移 */
}

常用组合

父 relative + 子 absolute 是最常见的定位模式。父元素设 position: relative 仅作为参照容器，本身不偏移。

五、📎 Fixed（固定定位） ​

css
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

核心特点 ​

特点说明
参照物浏览器视口（viewport）
文档流脱离文档流
滚动行为页面滚动时 始终固定 在视口同一位置

vs Absolute 的区别 ​

对比AbsoluteFixed
参照物定位祖先 / 页面浏览器视口
滚动时随页面一起滚动固定不动
典型用途叠加层、弹窗导航栏、回到顶部按钮

六、📐 偏移属性 ​

属性说明
top从参照物 顶部 向下推
bottom从参照物 底部 向上推
left从参照物 左侧 向右推
right从参照物 右侧 向左推
css
div {
  position: absolute;
  top: 50px;      /* 从顶部向下 50px */
  right: 20px;    /* 从右侧向左 20px */
}

偏移值可以使用 px、%、rem 等单位。百分比是相对于 定位容器 的尺寸。

七、📚 Z-index（层叠顺序） ​

当元素重叠时，z-index 决定谁在上谁在下：

css
.front { z-index: 100; }  /* 在上面 */
.back  { z-index: 50; }   /* 在下面 */
规则说明
默认值所有元素 z-index: 0（或 auto）
数值越大层级越 高，显示在更上面
可以为负值放到默认层级的 后面
仅对 已定位元素 生效position 不是 static 的元素

absolute 元素的层级

设置了 position: absolute 的元素默认会 浮在 普通文档流元素之上，即使不设置 z-index。

八、💡 实践要点 ​

#要点说明
1使用 relative 作为定位容器不设偏移，仅为子元素 absolute 提供参照
2absolute 必须确认祖先定位否则将相对于页面左上角，位置可能出乎意料
3fixed 适用于始终可见的 UI导航栏、悬浮操作按钮、Toast 提示
4慎用绝对定位做普通布局Flexbox 和 Grid 是更好的选择
5z-index 配合定位使用仅对 position 不是 static 的元素生效

九、🧪 CSS 圆形的创建 ​

利用 border-radius 可以将矩形变为圆形：

css
.circle {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;     /* 50% = 完美圆形 */
}
border-radius效果
5px小圆角
50px大圆角（类似 App 图标）
50%完美圆形（宽高需相等）

十、📚 参考资源 ​

← 返回 Web 开发研究