使用滚动上的变换将元素位置固定到父级答案

【问题标题】：Keep element position fixed to parent using transform on scroll使用滚动上的变换将元素位置固定到父级
【发布时间】：2017-07-27 22:07:53
【问题描述】：

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

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

更新：以上是我的问题的简化版本。 position:absolute: 不是我想要的解决方案。

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

【问题讨论】：

您是否尝试过将父级置于相对位置？
@ÁlvaroTouzón 是的，父级设置为相对

标签： css css-position css-transforms

【解决方案1】：

是的，只要将包含元素设置为相对位置，您就可以使用绝对位置来做到这一点。你根本不需要 transform 属性。

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

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

更新小提琴：https://jsfiddle.net/ds0vbtbt/1/

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

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

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

【讨论】：

感谢您的回答，更新了问题。使用变换固定的位置将创建一个局部坐标并始终相对于其父元素放置固定元素。但是，在滚动文档时，该位置并未“更新”。我想知道不使用“js”是否可行——Stevanicus 1 分钟前编辑
position: fixed 总是相对于视口 - 因此，如果您更改窗口大小，它将更新，但滚动时不会更新。也就是说，带有变换的元素充当固定位置后代的包含块，因此位置：固定在带有变换的东西下不再具有固定行为。它们在应用于同一元素时确实有效；该元素将被定位为固定，然后进行转换。
是的，所以在初始变换后更新位置的唯一方法是使用js，不是吗？
由于固定位置的行为方式，它会是的

【解决方案2】：

您正在使用 position:fixed 来修复带有视口的元素。对子元素使用 position:absolute 以将其与父元素一起修复。

【讨论】：

感谢您的回答，更新了问题。使用变换固定的位置将创建一个局部坐标并始终相对于其父元素放置固定元素。但是，在滚动文档时，该位置并未“更新”。我想知道不使用`js'是否可能
是的，抱歉，来晚了:)