所有div设为position:absolute时，如何让嵌套的.free-object覆盖所有元素？

问题核心 #

你的.left容器设置了overflow: auto且为绝对定位，这会创建一个独立的层叠上下文——内部元素的z-index无论多高，都只能在这个上下文里生效，无法突破到外部覆盖.right。同时，overflow: auto会裁剪容器内超出范围的绝对定位元素，所以直接调整z-index无效。

可行方案（必须保留.free-object在.left内） #

方案1：基于body定位+JS动态校准位置

把.free-object的定位基准从.left改成<body>，让它脱离.left的层叠上下文和裁剪限制，再用JS计算位置让它看起来仍在.left内部：

1. CSS代码

body {
  position: relative; /* 作为.free-object的定位基准 */
  margin: 0;
}
.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 100vh;
  overflow: auto;
  background: #eee;
}
.right {
  position: absolute;
  left: 300px;
  top: 0;
  width: calc(100% - 300px);
  height: 100vh;
  background: #ddd;
  z-index: 1;
}
.free-object {
  position: absolute;
  width: 200px;
  height: 200px;
  background: yellow;
  z-index: 999; /* 只要比.right的z-index高即可 */
}

2. JS代码（动态定位）
   计算.left的实时位置，同步到.free-object：

function setFreeObjectPosition() {
  const leftEl = document.querySelector('.left');
  const freeObj = document.querySelector('.free-object');
  const rect = leftEl.getBoundingClientRect();
  
  // 转换视口坐标为文档坐标，适配页面滚动
  freeObj.style.top = `${rect.top + window.scrollY}px`;
  freeObj.style.left = `${rect.left + window.scrollX}px`;
}

// 初始化执行
setFreeObjectPosition();
// 监听滚动和窗口 resize，实时更新位置
window.addEventListener('scroll', setFreeObjectPosition);
window.addEventListener('resize', setFreeObjectPosition);

方案2：fixed定位（适合固定布局场景）

如果.left在页面中是固定位置（不随页面滚动移动），可以直接用position: fixed，这样.free-object基于视口定位，不需要监听页面滚动：

.free-object {
  position: fixed;
  top: 20px; /* 对应你想要在.left内的位置 */
  left: 20px;
  width: 200px;
  height: 200px;
  background: yellow;
  z-index: 999;
}

⚠️ 注意：如果.left内部有滚动条，fixed元素不会跟随内部滚动，这时候需要额外监听.left的scroll事件，动态调整.free-object的top值。

为什么这个方法有效？ #

• 当元素设置overflow: auto且为定位元素时，会强制创建独立层叠上下文，内部元素的层叠关系被限制在容器内。
• 把.free-object的定位基准切换到.left之外的元素（body或视口），它就脱离了.left的层叠上下文和裁剪范围，此时z-index就能正常作用于全局，覆盖.right。
• .left的overflow: auto依然能正常工作，因为.free-object不再属于它的包含块，不会被裁剪。

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