使用 transform on scroll 将元素位置固定到父级

Question

我知道可以使用 transform position:fixed 相对于其父元素的子元素。滚动文档时，是否可以保持子项相对于父项而不是文档的固定位置？

演示 https://jsfiddle.net/ds0vbtbt/3/

更新：以上是我的问题的简化版本。 position:absolute: 不是我正在寻找的解决方案。

更新：一旦执行了初始转换，没有 JS 似乎是不可能的

Answer 1

您正在使用 position:fixed 来固定带有视口的元素。对子元素使用 position:absolute 来固定父元素。

Answer 2

是的，您可以使用绝对位置来做到这一点，前提是包含元素设置为相对位置。您根本不需要转换属性。

.test {
  width: 400px;
  height: 400px;
  border: 1px solid;
  position: relative;
}

.box {
  margin-top: 20px;
  width: 300px;
  height: 100px;
  border: 1px solid red;
  position: absolute;
}

已更新 fiddle：https://jsfiddle.net/ds0vbtbt/1/

一个位置为绝对的元素；相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。

但是；如果绝对定位元素没有定位的祖先，它使用文档主体，并随着页面滚动移动。

更新： position: fixed 总是相对于视口 - 所以如果你改变 window 大小它会被更新，但是滚动时不会。也就是说，具有变换的元素充当固定位置后代的包含块，因此具有变换的东西下的 position:fixed 不再具有固定行为。当应用于同一元素时，它们确实起作用；元素将定位为固定，然后进行转换。

使用 transform on scroll 将元素位置固定到父级

Keep element position fixed to parent using transform on scroll

css

css-position

css-transforms