使用 CSS3 动画会破坏页面中所有元素的固定背景定位

Question

我刚刚制作了一个网页，其中包含具有 fixed 背景定位的元素，并且在我将 css 动画 应用于（完全不同且不相关的）元素之前，它的效果很好。

我尝试删除/重新应用动画以确保确实是问题所在，果然，当我添加动画时，背景定位（页面上的 每个 元素）变为静态，并在我删除动画的那一刻再次工作。

这正常吗？

---

最终，我正在寻找一种解决方案，它允许：

• 相对定位，
• 浮动元素（或至少类似包装器的子元素）
• 用于固定背景位置
• 在使用 CSS3 动画的网页中，
• 与 Chrome 兼容。

---

下面是动画：

http://jsfiddle.net/Wr7X4/5/

这里没有它们：

http://jsfiddle.net/Wr7X4/4/

我只在 Chrome 中测试过。

---

更新：如一个答案所示，为元素提供固定背景位置 static 定位会导致元素在 CSS3 动画时保留其固定背景的行为以牺牲所需的相对元素定位为代价在页面上处于活动状态。

人们会认为这可以通过将相关元素包装在相对父元素中来解决，但事实并非如此。

如果 CSS3 动画（或过渡）在页面上活动 任何地方，那么即使是相对定位元素的孙子元素也会失去其固定的背景定位.

---

这是与 静态定位：

http://jsfiddle.net/Wr7X4/6/

这是静态定位带有相对包装器，浮动：

http://jsfiddle.net/Wr7X4/7/

这是上面的没有激活 CSS3 动画：

http://jsfiddle.net/Wr7X4/8/

如果我从包装器中删除 float:left，我刚刚发现了一些东西：

http://jsfiddle.net/Wr7X4/9/

这让它工作得很好！

---

Answer 1

CSS3 动画打破了 Chrome 中固定的背景定位。

我得到的最接近我的要求答案的是一种解决方法，它允许：

• 相对定位，
• 固定背景元素，
• 在使用 CSS3 动画的网页中，
• 与 Chrome 兼容。

但不对于：

• fixed-background 元素最终 被赋予 float 定位的行为。

---

解决方法这个 Chrome 错误：

1. 使用类relative-wrapper 围绕fixed background-position 元素放置一个包装器。

2. 为相对包装类指定样式position: relative。 （以及您需要提供的任何其他样式，例如宽度或高度。只是没有 float。

3. 最后，讽刺地，将fixed background-position 的元素设置为float: left 样式（或任何浮点数）。注意：浮动定位将使您的元素行为和大小不同。

---

如果您还不知道它是如何导致元素行为的，那么您应该使用 Google CSS 浮动定位。但是，由于这个问题的目的是弄清楚如何在具有 CSS3 动画的页面中的固定背景元素上进行相对定位和浮动定位，我将假设您可以处理。 p>

---

注意早先，我说过fixed background-position元素不能

最终 获得float定位的行为。

这是因为无论您做什么，都必须将浮动元素包装在具有非浮动定位的包装器中，否则fixed 背景位置将保持损坏。碰巧元素 inside 需要为相对包装器指定 float 定位以保持其固定的背景定位。

---

我不知道为什么会这样，但它确实。

这是JSFiddle, see for yourself.

---

CSS3 过渡 活动：固定背景定位效果相同

我没有时间添加 JSFiddle 示例，但值得注意的是，当 CSS3 过渡 活动 时，此解决方法还解决了元素中 fix-background position 的损坏问题strong> 在网页中。

Answer 2

试试这个

.outside-board{
    //try to change position to
    position:static;
}