Html 位置固定在子元素中，但同步父元素x滚动子元素左位置

我有一个div，它位于相对位置并水平滚动

在该div中，我希望有一个固定的定位元素，它与父div一起滚动，但保持在顶部，因为父div是垂直滚动div的子元素

我创建了一个codesandbox来说明我的观点：

因此，绿色div垂直滚动，因此红色和蓝色div可以同时滚动。 蓝色div也可以水平滚动，因此红色div保持可见

现在我希望橙色的div（上面写着RightPane）与蓝色的div一起水平滚动，但是当绿色的div垂直滚动时，我希望橙色的div保持不变

将右窗格设置为

position:fixed

而不设置

top

属性有助于防止垂直滚动，但也可以防止水平滚动

---

仅使用CSS就可以实现这一点吗？

我认为不可能完全实现您想要的功能，但我可以通过对右侧窗格和橙色标题使用

位置：sticky

来实现这一点

检查这是否可以为您提供一些额外的调整，可能：

---

很好！非常感谢你。左窗格上的粘性位置是个好主意。

.App {
  position: relative;
  ...
}

.leftPane {
  width: 30%;
  z-index: 1;
  position: sticky;
  left: 0px;
  float: left;
  ...
}

.rightPane {
  height: 100%;
  margin-left: calc(30% + 20px);
  position: relative;
  ...
}

.fixedPane {
  position: sticky;
  ...
}