前端面试-关于position定位的哪些问答
前端面试中，position定位绝对算是出现的频繁的一个面试题了，我们这次来共享下关于这个属性可以问出怎么样的问题。
CSS 的 position 属性用于控制元素的定位方式，共有五种值：
static、relative、absolute、fixed、sticky。
1. static（默认值）
特性：元素遵循常规文档流，top、left、z-index 等属性无效。
应用场景：默认布局，无需特殊定位时使用。
2. relative（相对定位）
特性：相对于元素自身在文档流中的原始位置偏移。不脱离文档流，原位置仍保留，不影响其他元素布局。常用于作为 absolute 子元素的定位参照物。
3. absolute（绝对定位）
特性：脱离文档流，不保留原位置，后续元素会占据其位置。相对于最近的定位祖先元素（非 static）定位；若无，则相对于 <body>。支持设置宽高，即使原为行内元素。
应用场景：下拉菜单、模态框等需要精准定位的元素。
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 等属性将元素定位到视口可见区域之外。