如何让深度嵌套的div元素固定悬浮在页面视口顶部？

纯CSS实现方式 #

不用特意处理深层嵌套的问题，直接给需要悬浮的元素使用position: fixed定位即可，这个定位规则默认就是相对于浏览器视口生效，和元素本身嵌套多深没有关系。
对应你给出的示例结构，只要给内层需要贴顶的div加如下样式就能实现效果：

/* 替换成你要固定的目标元素的选择器即可 */
.sticky-top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  /* 背景色、内边距、阴影等样式按需自定义 */
  background: #fff;
}

注意：有个特殊情况会让fixed定位失效——如果该元素的任意一层祖先元素设置了非none值的transform、perspective、filter、contain: paint属性，或是设置了will-change: transform，会让fixed的定位参考对象变成这个祖先元素，而非浏览器视口，这种场景下纯CSS无法在原DOM位置实现你要的效果。

父元素干扰fixed时的解决方案 #

如果遇到上面说的fixed失效的场景，不需要引入复杂库，两种方案就能解决：

• 节点转移方案：直接把需要固定的元素移动到body节点的直接子级位置，再应用fixed样式即可，原生JS实现非常简单：

const fixedEl = document.querySelector('你要固定的元素选择器');
document.body.appendChild(fixedEl);
// 给元素加上前面说的fixed样式即可正常贴顶

如果你用Vue、React这类现代前端框架，不要手动操作DOM移动节点，直接用框架内置的传送能力即可：Vue3用<Teleport to="body">包裹要固定的元素，React用createPortal把元素渲染到body下，不会破坏框架本身的响应式、事件绑定逻辑。

• 滚动模拟方案：如果业务要求必须把元素保留在原DOM位置，可以通过监听页面滚动事件，动态计算元素的偏移量，模拟fixed贴顶的效果。但这个方案需要额外处理滚动抖动、移动端软键盘弹出、页面缩放等边界问题，维护成本高，优先选节点转移方案。

相关工具说明 #

不需要专门找独立的JS库实现这个效果：

• 主流UI组件库的弹窗、吸顶导航、抽屉类组件都内置了节点传送逻辑，直接使用就能自动规避嵌套层级、父元素属性干扰的问题
• 如果你需要兼容非常老的浏览器（比如IE9及以下，不支持正常的fixed定位），再考虑引入专门的fixed兼容库即可，现在绝大多数业务场景都不需要。

内容的提问来源于stack exchange，提问作者Adee