一、CSS 定位（position）：精准控制元素位置的高级布局
定位是 CSS 中脱离普通文档流、精准控制元素位置的核心属性，可实现侧边栏固定、悬浮按钮、粘滞导航等特殊布局效果，是前端面试高频考点。
1. 定位的核心分类
定位通过position属性控制，分为 "未开启定位" 和 "开启定位" 两类：
css
/* 可选值 */
.element {
position: static; /* 默认值，未开启定位 */
position: relative; /* 相对定位 */
position: absolute; /* 绝对定位 */
position: fixed; /* 固定定位 */
position: sticky; /* 粘滞定位 */
}2. 定位的通用特点
- 开启定位后元素层级提升（可覆盖普通文档流元素）；
- 需结合偏移量（left/right/top/bottom）调整位置，否则无视觉变化；
- 不同定位类型的核心差异：是否脱离文档流、参考原点不同。
3. 偏移量：控制定位元素的位置
偏移量需配合定位使用，水平 / 垂直方向各选一个值即可：
| 偏移量 | 作用（相对参考原点） | 取值规则 |
|---|---|---|
| left | 水平方向偏移 | 正值右移，负值左移 |
| right | 水平方向偏移 | 正值左移，负值右移 |
| top | 垂直方向偏移 | 正值下移，负值上移 |
| bottom | 垂直方向偏移 | 正值上移，负值下移 |
css
.box {
position: relative;
left: 50px; /* 相对原位置右移50px */
top: 20px; /* 相对原位置下移20px */
}二、四大定位类型详解
1. 相对定位（relative）：基于自身原位置的偏移
（1）核心特点
- 不脱离文档流，原位置仍保留（不会导致布局塌陷）；
- 参考原点：元素自身在文档流中的初始位置；
- 层级提升，可覆盖普通元素；
- 行内元素开启后仍保持行内特性，但可设置宽高。
（2）语法与示例
css
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: relative; /* 开启相对定位 */
right: 50px; /* 相对原位置左移50px */
top: 0; /* 垂直方向无偏移 */
}（3）应用场景
- 微调元素位置（如按钮 hover 时的偏移、图标位置校准）；
- 作为绝对定位的 "包含块"（子绝父相核心）；
- 不影响其他元素布局的局部位置调整。
2. 绝对定位（absolute）：基于包含块的精准定位
（1）核心特点
- 脱离文档流，原位置不再保留（会导致布局塌陷）；
- 参考原点：包含块 （离它最近的已开启定位的祖先元素，若无则为根标签
<html>）； - 层级提升，元素性质改变：行内元素变行内块、块元素宽高默认被内容撑开；
- 开启 BFC 属性（可解决外边距折叠、高度塌陷）。
（2）面试高频：子绝父相（核心应用）
给子元素开绝对定位时，父元素必须开相对定位（仅占位，不偏移），确保子元素以父元素为参考原点：
css
.outer {
width: 600px;
height: 400px;
border: 5px solid black;
position: relative; /* 父元素相对定位（仅作为包含块） */
}
.inner {
width: 200px;
height: 200px;
background-color: red;
position: absolute; /* 子元素绝对定位 */
left: 50px; /* 相对父元素左移50px */
top: 50px; /* 相对父元素下移50px */
}（3）包含块的判定规则
- 未开启定位：包含块为最近的祖先块元素；
- 开启定位：包含块为最近的已开启定位（relative/absolute/fixed）的祖先元素；
- 无定位祖先：包含块为根标签
<html>（浏览器窗口）。
（4）应用场景
- 弹窗、悬浮按钮、下拉菜单等脱离文档流的布局；
- 精准定位小图标（如输入框内的搜索图标）；
- 多元素重叠布局（如轮播图的页码指示器）。
3. 固定定位（fixed）：基于浏览器窗口的固定布局
（1）核心特点
- 脱离文档流，原位置不保留；
- 参考原点：整个浏览器窗口（与祖先元素无关）；
- 不会随滚动条滚动而移动；
- 层级提升，元素性质同绝对定位。
（2）语法与示例
css
.sidebar {
width: 100px;
height: 300px;
background-color: orange;
position: fixed; /* 开启固定定位 */
left: 0; /* 紧贴浏览器左侧 */
top: 0; /* 紧贴浏览器顶部 */
}（3）应用场景
- 页面侧边栏、返回顶部按钮；
- 固定导航栏、广告悬浮窗；
- 登录弹窗、购物车悬浮图标。
4. 粘滞定位（sticky）：相对 + 固定的混合定位
（1）核心特点
- 不脱离文档流，原位置保留；
- 滚动前：随滚动条正常滚动（同相对定位）；
- 滚动到偏移阈值（如 top:0）：固定在指定位置（同固定定位）；
- 仅在父元素范围内生效，超出父元素则失去粘滞效果。
（2）语法与示例（粘滞导航）
css
nav {
width: 500px;
height: 50px;
background-color: #ccc;
position: sticky; /* 开启粘滞定位 */
top: 0; /* 滚动到顶部时固定 */
}（3）应用场景
- 页面顶部粘滞导航栏；
- 侧边栏目录粘滞定位；
- 表格表头粘滞（滚动时表头固定）。
三、定位核心对比表（面试必背）
| 定位类型 | 是否脱离文档流 | 参考原点 | 核心特点 | 典型场景 |
|---|---|---|---|---|
| static | 否（默认） | - | 无定位效果 | 普通布局 |
| relative | 否 | 自身原位置 | 不影响其他元素 | 微调位置、子绝父相 |
| absolute | 是 | 最近定位祖先 / 根标签 | 布局塌陷、子绝父相 | 弹窗、悬浮元素 |
| fixed | 是 | 浏览器窗口 | 不随滚动移动 | 侧边栏、固定导航 |
| sticky | 否 | 浏览器窗口（阈值后） | 滚动到阈值固定 | 粘滞导航、表头固定 |
四、图标字体（iconfont）：轻量灵活的图标解决方案
图标字体是将图标封装为字体文件的使用方式，相比图片图标体积更小、可自由修改颜色 / 大小，是前端开发的主流图标方案。
1. 图标字体的核心优势
- 体积小：单个字体文件可包含数十个图标；
- 灵活性高：可通过 CSS 修改颜色、大小、阴影等样式；
- 兼容性好：支持所有主流浏览器；
- 矢量特性：放大不失真，适配不同分辨率设备。
2. 图标字体的引入方式
（1）引入字体文件（线上 / 线下）
css
<!-- 线上引入（阿里图标库示例） -->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5101199_zw2z6e79o9j.css" />
<!-- 线下引入（下载字体文件后） -->
<link rel="stylesheet" href="./font/iconfont.css" />3. 图标字体的 3 种使用方式
（1）类名形式（最常用）
css
<!-- 结构 -->
<i class="iconfont icon-cart"></i> 购物车
<i class="iconfont icon-weixin1"></i> 微信
<!-- 样式（可自由修改大小、颜色） -->
<style>
.icon-cart {
font-size: 30px; /* 图标大小 */
color: red; /* 图标颜色 */
font-weight: bold; /* 加粗（部分图标生效） */
}
</style>（2）转义字符形式
通过图标对应的 Unicode 编码使用，需配合iconfont类名：
<i class="iconfont"></i> 安徽（3）伪类形式（进阶用法）
通过::before/::after伪元素插入图标，不增加冗余 DOM：
css
.box::before {
content: "\e611"; /* 图标Unicode编码 */
font-family: "iconfont"; /* 必须指定图标字体家族 */
font-size: 30px;
color: red;
}总结
1. 定位核心
- 相对定位是 "子绝父相" 的基础，绝对定位依赖包含块精准布局；
- 固定定位适配全局固定元素，粘滞定位适配滚动阈值固定场景；
- 定位切忌滥用，普通布局优先用 Flex/Grid，特殊位置才用定位。
2. 图标字体核心
- 优先使用类名形式引入，兼顾简洁性和可维护性；
- 伪类形式适合无冗余 DOM 的场景，转义字符形式作为补充；
- 图标字体可完全替代图片图标，降低页面加载体积。
掌握定位的 "参考原点 + 脱离文档流" 核心逻辑，以及图标字体的灵活使用，是前端布局和 UI 优化的关键，也是面试中区分基础能力的重要考点。