position
CSS 中 static、relative、absolute、fixed、sticky 五种定位方式的职责差异。
#tech / dev / frontend
#type / concept
#status / growing
[!info] related notes
css-position
position 决定的是元素如何脱离或参与正常文档流，以及偏移参照系是什么。
一句话定义
理解 position 的关键，不是背五个值，而是弄清它会不会脱离文档流、相对谁定位、滚动时会不会跟着变。
五种常见取值
static
- 默认值
- 元素按正常文档流排布
top/right/bottom/left通常不生效
relative
- 元素仍在文档流中
- 相对自己原来的位置偏移
- 常用于给内部绝对定位元素提供参照系
absolute
- 脱离文档流
- 相对最近的非
static祖先定位 - 常用于弹层角标、局部覆盖元素
fixed
- 脱离文档流
- 通常相对视口定位
- 页面滚动时位置通常不变
sticky
- 在阈值前像
relative - 达到阈值后像吸附在滚动容器里
- 常用于吸顶标题、分组索引
最容易混淆的点
absolute常常不是相对父元素，而是相对最近的已定位祖先relative不会让元素脱离文档流sticky不是简化版fixed，它依赖滚动容器和阈值条件
最短记忆方式
relative 留位偏移，absolute/fixed 脱流定位，sticky 滚动吸附。
面试要点
来自 fitts-law-nielsens-heuristics-interview-question 的面试视角整理。
一句话回答
CSS 高斯模糊主要用两个属性：filter: blur() 作用于元素自身内容，backdrop-filter: blur() 作用于元素背后的背景区域，常用于毛玻璃效果。
核心区别
filter: blur()
- 作用对象：元素自身的内容（文字、图片、子元素等）
- 效果：让整个元素看起来变模糊
- 典型用途：图片模糊处理、背景图虚化
.blurred-image {
filter: blur(8px);
}backdrop-filter: blur()
- 作用对象：元素背后的区域（元素后面的背景内容）
- 效果：元素本身不模糊，但它下面的内容变模糊，形成毛玻璃
- 典型用途：导航栏毛玻璃、弹窗背景模糊、卡片半透明效果
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); /* Safari 兼容 */
}面试回答主线
毛玻璃效果怎么做
三步：
- 元素设置半透明背景色（
rgba或hsla） - 加
backdrop-filter: blur(值) - 补
-webkit-前缀兼容 Safari
性能要注意什么
- 大面积模糊有性能成本，尤其在低端设备和移动端
backdrop-filter会触发额外的合成层，浏览器需要实时计算元素后方内容- 建议控制模糊范围，不要全屏滥用
- 可以用
will-change提示浏览器优化，但用完要移除
兼容性
filter兼容性很好，现代浏览器都支持backdrop-filter在 Safari 需要-webkit-前缀，Firefox 默认开启，Chrome 86+ 支持- 做降级方案：不支持时退回纯色半透明背景
常见误区
只写 filter 不写 backdrop-filter
毛玻璃效果的核心是 backdrop-filter，不是 filter。filter: blur() 会让元素自己都模糊，达不到毛玻璃效果。
忘记半透明背景
backdrop-filter 只模糊背后内容，如果元素背景不透明，模糊效果会被挡住看不见。
最短记忆方式
filter: blur()= 模糊自己backdrop-filter: blur()= 模糊背后（毛玻璃）- 毛玻璃 = 半透明背景 + backdrop-filter + webkit 前缀
一句话回答
Fitts 定律说目标越大、距离越近，操作越快；尼尔森原则强调系统状态可见、一致性、错误预防等。在中后台里，它们直接指导按钮大小、布局密度、错误提示和操作确认的设计。
Fitts 定律
核心公式
操作时间 = 基础时间 + 系数 × log₂(距离 / 大小 + 1)
简单理解：目标越大、离当前操作位置越近，用户操作越快。
在前端的应用
- 高频按钮要足够大：提交、保存、删除等核心操作按钮不能太小
- 重要操作放右侧或底部：符合从左到右、从上到下的阅读习惯
- 命令面板（Command Palette）：减少鼠标移动，键盘直达功能
- 侧边导航固定：常用功能始终在固定位置，减少寻找成本
- 危险操作增加距离：删除按钮不要和编辑按钮挨太近，防止误触
尼尔森十大交互原则
1. 系统状态可见
- 加载态、提交态、错误态都要有明确反馈
- 路由切换时加进度条或骨架屏
- 长操作显示进度提示
2. 系统和现实世界匹配
- 用用户能理解的语言，不要用技术术语
- 错误提示说清楚”什么错了、怎么改”，不要只报错误码
3. 用户控制和自由
- 提供撤销/重做
- 表单支持草稿保存
- 弹窗和流程支持中途退出
4. 一致性和标准
- 同一操作在不同页面的行为一致
- 按钮样式、颜色语义统一
- 遵循平台惯例（如确认在右、取消在左）
5. 错误预防
- 表单实时校验，不要等提交才报错
- 危险操作二次确认
- 禁用不可用的操作而不是隐藏
6. 识别而非回忆
- 下拉选项比输入框好，减少记忆负担
- 历史记录和最近访问帮助用户快速定位
- 表单字段给示例和提示
7. 灵活性和使用效率
- 提供快捷键（如 Ctrl+S 保存）
- 高级用户可以用命令面板快速跳转
- 新手引导和老手快捷方式并存
8. 美学和极简设计
- 不要堆信息，按重要性分层
- 表格列可自定义显示/隐藏
- 仪表盘按角色定制
9. 帮助用户识别、诊断和恢复错误
- 错误提示具体到字段和操作
- 提供修复建议或一键重试
- 关键错误给工单或反馈入口
10. 帮助和文档
- 复杂功能旁加问号提示
- 设置页给功能说明链接
- 提供搜索帮助文档的入口
面试回答主线
如果问”你怎么考虑用户体验”
不要空谈理论，举项目里的实际例子：
比如我做全局错误边界和命令面板，本质上就是尼尔森原则里”系统状态可见”和”灵活性与效率”的落地。错误边界保证页面不会白屏，命令面板让高频操作可以键盘直达，减少鼠标移动成本，这也符合 Fitts 定律。
如果问”安全控制台要注意什么交互”
- 重要操作的确认反馈（防止误操作导致安全策略变更）
- 表单错误的可理解性（策略配置不能出错且用户要知道错在哪）
- 列表、筛选、状态标签的一致性（安全事件多，信息密度高）
- 实时状态变化时的可见性和可追溯性（告警、策略生效状态要清晰）
最短记忆方式
- Fitts = 大目标 + 近距离 = 快操作
- 尼尔森 = 状态可见、一致性、错误预防、识别而非回忆
- 落地 = 按钮大小、错误提示、快捷键、确认弹窗、加载反馈