前端面试-关于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 等属性将元素定位到视口可见区域之外。

原文链接:,转发请注明来源!