真实面经题目 · 原创解析
这道题可以分成两部分回答：先讲 CSS 的 position 定位机制，包括 static、relative、absolute、fixed、sticky 的行为、参照物、是否脱离文档流以及对层叠关系的影响；再讲 CSS 单位体系，包括绝对单位、字体相关相对单位、视口单位、百分比以及时间、角度、分辨率等专用单位。核心不是背属性名，而是说明元素如何确定自己的位置、尺寸如何继承或换算，以及不同单位在响应式布局、可访问性和动画中的使用边界。
CSS 的 position 主要决定元素参与文档流的方式，以及 top、right、bottom、left、z-index 这些偏移和层叠属性如何生效。static 是默认定位，元素按普通文档流排列，偏移属性不生效。relative 仍然保留原来的文档流位置，只是在视觉上相对自身原位置偏移，常用于微调位置或作为 absolute 子元素的定位参照。absolute 会脱离文档流，相对于最近的非 static 定位祖先定位；如果找不到这样的祖先，就相对于初始包含块定位。fixed 也脱离文档流，通常相对于视口固定，适合固定导航、悬浮按钮等。sticky 是 relative 和 fixed 的结合，元素在阈值之前按文档流走，到达指定偏移后在滚动容器内吸附，需要设置至少一个偏移值，并且受父级滚动容器和边界限制。定位元素使用 z-index 时会影响层叠顺序，一些情况还会创建新的层叠上下文，因此判断遮挡问题不能只看 z-index 数字，还要看它们是否处在同一个层叠上下文里。CSS 单位可以按用途分为绝对单位、相对单位、视口单位、百分比和专用单位。px 是最常用的 CSS 像素，适合边框、图标、精确间距；em 相对于当前元素字体大小，rem 相对于根元素字体大小，更适合响应式排版；vw、vh、vmin、vmax 以及动态视口单位适合和屏幕尺寸绑定的布局；百分比通常相对于包含块或相关属性的参考值计算，具体要看属性语义；时间单位用于动画和过渡，角度单位用于旋转和渐变，分辨率单位用于媒体查询。实际开发中要根据参照对象选择单位：需要稳定精确用 px，需要跟随字体缩放用 rem 或 em，需要跟随视口用视口单位，需要相对于容器用百分比。
position 决定的是元素定位模型，也就是元素在页面布局中是否参与普通文档流、偏移属性是否生效、偏移时参考谁、以及层叠顺序如何计算。它不是单纯让元素移动的属性，而是改变元素与文档流、包含块、滚动容器之间关系的机制。理解 position 时要同时看四件事：是否占据原位置、top/right/bottom/left 的参照物、z-index 是否参与排序、以及父子元素之间是否形成定位约束。
static 是默认值，元素按照普通文档流排列，top、right、bottom、left 和 z-index 对它通常不起作用。relative 仍然保留元素在文档流中的原始占位，但视觉位置可以相对自身原位置偏移，因此它移动后不会影响兄弟元素的布局位置。relative 常见用途有两个：一是做少量视觉微调，二是给内部 absolute 元素提供最近的定位祖先。
absolute 会让元素脱离普通文档流，不再占据原来的布局空间，后续元素会像它不存在一样进行排版。它的定位参照是最近的非 static 祖先元素，也就是祖先的 position 为 relative、absolute、fixed 或 sticky 时都可能成为参照；如果找不到，则通常相对于初始包含块定位。absolute 适合弹层、徽标、角标、局部覆盖等场景，但要注意父元素是否建立了正确的定位上下文，否则元素可能跑到意料之外的位置。
fixed 通常相对于视口定位，元素脱离文档流，页面滚动时它仍保持在视口中的固定位置，常用于固定头部、返回顶部按钮、悬浮操作区等。sticky 则比较特殊，它在未达到阈值前像 relative 一样参与文档流，滚动到指定 top、bottom、left 或 right 阈值后表现得像 fixed，但只在所属滚动容器和父级边界内生效。sticky 失效时常见原因是没有设置偏移值、父级 overflow 形成了滚动限制、父容器高度不足，或者期望它脱离父级边界。
判断定位行为时，一个关键问题是元素是否仍占据原本空间。static 和 relative 都保留文档流空间，relative 只是视觉偏移，原位置仍会影响周围布局。absolute 和 fixed 会脱离文档流，不占据原空间，因此可能覆盖其他元素，也可能导致父元素高度塌陷。sticky 在正常阶段参与文档流，吸附阶段仍受原布局和容器边界约束，所以它不是完全意义上的脱离文档流。
z-index 不是全局比较大小，而是在层叠上下文中比较顺序。定位元素设置有效的 z-index 后，可能形成新的层叠上下文；另外 opacity、transform、filter、isolation、contain 等属性也可能创建层叠上下文。排查元素遮挡问题时，不能只看某个元素的 z-index 数字，还要看它和目标元素是否处在同一个层叠上下文中；如果父级层叠上下文级别较低，子元素的 z-index 再大也可能盖不过外部元素。
CSS 单位可以分为绝对长度单位、相对长度单位、视口单位、百分比单位和专用单位。绝对长度包括 px、cm、mm、in、pt、pc 等，网页中最常用的是 px；相对单位包括 em、rem、ch、ex、lh、rlh 等，适合和字体、行高或字符宽度关联；视口单位包括 vw、vh、vmin、vmax，以及更适合移动端动态视口的 svh、lvh、dvh 等；百分比依赖具体属性的参考对象；时间单位 s、ms 用于动画，角度单位 deg、rad、turn 用于旋转和渐变，分辨率单位 dpi、dppx 常用于媒体查询。
单位选择要看希望尺寸跟随什么变化。需要像素级稳定控制时可以用 px，例如细边框、图标尺寸、固定间距；需要支持用户字体缩放和整体排版比例时，rem 通常比 px 更适合；需要组件内部随着父级字体变化时，可以用 em；需要元素随容器宽高变化时，可以用百分比；需要和屏幕尺寸绑定时使用视口单位。移动端使用 vh 时要注意浏览器地址栏带来的可视高度变化，复杂场景可考虑动态视口单位。
不一定。absolute 相对于最近的非 static 定位祖先定位，如果父元素没有设置 position，浏览器会继续向上找祖先元素。只有当父元素的 position 不是 static 时，它才会成为常见意义上的定位参照。
relative 会让定位偏移属性生效，并且可以作为 absolute 子元素的定位祖先，但它仍保留原文档流位置。transform 主要是视觉变换，通常不会影响文档流布局，也不会因为自身存在就成为 absolute 的定位参照，但它可能创建新的层叠上下文，并可能影响 fixed 元素的包含块判断。
sticky 需要设置 top、bottom、left 或 right 之一，否则没有吸附阈值。它还会受最近滚动容器和父级边界影响，如果父容器高度不足、滚动容器不是预期对象，或者祖先 overflow 设置导致滚动上下文改变，都可能看起来不生效。
最常见原因是两个元素不在同一个层叠上下文中。子元素的 z-index 再大，也只能在父级层叠上下文内部比较；如果父级所在层级低于另一个元素的父级，那么子元素可能无法越级覆盖。
px 适合需要精确控制且不希望随字体变化的尺寸，比如边框、图标和部分固定间距。rem 适合全局排版和响应式尺寸体系，em 适合组件内部根据当前字号联动变化的尺寸。
百分比高度通常需要包含块有明确的高度作为参考。如果父元素高度由内容自然撑开，子元素设置百分比高度时可能没有可计算的明确基准，因此表现不符合预期。
