前端面试中，position定位绝对算是出现的频繁的一个面试题了，我们这次来共享下关于这个属性可以问出怎么样的问题。

CSS 的 position 属性用于控制元素的定位方式，共有五种值：

static、relative、absolute、fixed、sticky。

1. static（默认值）

特性：元素遵循常规文档流，top、left、z-index 等属性无效。

应用场景：默认布局，无需特殊定位时使用。

2. relative（相对定位）

特性：相对于元素自身在文档流中的原始位置偏移。不脱离文档流，原位置仍保留，不影响其他元素布局。常用于作为 absolute 子元素的定位参照物。

3. absolute（绝对定位）

特性：脱离文档流，不保留原位置，后续元素会占据其位置。相对于最近的定位祖先元素（非 static）定位；若无，则相对于 。支持设置宽高，即使原为行内元素。

应用场景：下拉菜单、模态框等需要精准定位的元素。

4. fixed（固定定位）

脱离文档流，相对于浏览器视口定位，滚动页面时位置不变。常用于固定导航栏、返回顶部按钮。

5. sticky（粘性定位）

结合 relative 和 fixed，在跨越指定阈值前为相对定位，之后为固定定位。

需设置 top、left 等触发阈值，父容器不能有 overflow: hidden。

应用场景：吸顶导航、表格头部固定。

高频面试题

fixed和absolute的区别

定位的参照物不同，前者参照浏览器窗口，后者参照父祖元素。

sticky 的生效条件？

必须设置 top、left 等阈值。

父容器不能设置 overflow: hidden。

父元素高度需大于 sticky 元素高度。

如何实现元素垂直水平居中？

z-index 的生效条件？

仅对定位元素（非 static）有效。

层级由 z-index 值和 DOM 顺序共同决定。

奇怪的问题 position: fixed能否定位到浏览器窗口外的问题

不能。position: fixed 元素的定位范围严格受限于浏览器视口（viewport），无法通过设置 top、left 等属性将元素定位到视口可见区域之外。