我刚刚在一个网页上工作，该网页包含具有 固定 背景定位的元素，在我将 css 动画 应用到一个(完全不同且不相关的)元素之前，它工作得很好.
我尝试删除/重新应用动画以确保它确实是问题所在，果然，当我添加动画时，背景定位(页面上的每个元素)变为静态，并在我删除动画时再次工作。
这正常吗？
最终，我正在寻找一种解决方案，它允许:
- 相对定位，
- float 元素(或类似包装器的至少子元素)
- 与固定背景位置一起使用
- 在使用 CSS3 动画的网页中，
- 与 Chrome 兼容。
这是动画:
这里没有它们:
我只在 Chrome 中测试过。
更新:如一个答案所示，为元素提供固定背景位置 static 定位会导致元素保留其行为当 CSS3 动画在页面上处于事件状态时以所需的相对元素定位为代价修复了背景。
人们会认为这可以通过将相关元素包装在相对父元素中来解决，但事实并非如此。
如果 CSS3 动画(或过渡)在页面上事件 任何地方，看起来即使是相对定位元素的孙元素也会失去其固定的背景定位.
这是静态定位:
这是带有相对包装器的静态定位， float :
上面是 没有激活 CSS3 动画:
还有一些我刚刚发现的东西，如果我从包装器中删除 float:left:
这让它工作得很好!
最佳答案
CSS3 动画打破了 Chrome 中的固定背景定位。
我得到的最接近我的请求答案的是一种解决方法，它允许:
- 相对定位，
- 固定背景元素，
- 在使用 CSS3 动画的网页中，
- 与 Chrome 兼容。
但不用于:
fixed-background元素 ultimately 被赋予 behaviorfloat定位。
要解决这个 Chrome 错误:
用
relative-wrapper类围绕fixed background-position元素放置一个包装器。为 relative-wrapper 类指定样式
position: relative。 (以及您需要为其提供的任何其他样式，例如宽度或高度。只是没有 float。最后，具有讽刺意味的是，为具有
fixed background-position的元素赋予样式float: left(或任何 float ) .注意: float 定位将使您的元素行为和大小不同。
如果您还不知道它如何导致元素行为，您应该谷歌 CSS float 定位。然而，由于这个问题的目的是弄清楚如何在具有 CSS3 动画的页面中的固定背景元素上进行相对定位和 float 定位，我假设您可以处理。
注意前面，我说过 fixed background-position 元素不能
ultimately be given the behavior of
floatpositioning.
这是因为无论你做什么，你都必须将 float 元素包装在非 float 定位的包装器中，否则 fixed 背景位置保持损坏 .碰巧 inside 相对包装器的元素需要被赋予 float 定位以保持其固定的背景定位。
我不知道为什么会这样，但它确实。
这是 JSFiddle, see for yourself.
CSS3 Transition 事件:固定背景定位效果相同
我没有时间添加 JSFiddle 示例，但值得注意的是，此解决方法还解决了CSS3 Transitionsfix-background position 的损坏问题> 在网页中活跃。
关于css - 使用 CSS3 动画打破了页面中所有元素的固定背景定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22875647/