4

继CSS3 动画在页面滚动时打破固定定位之后，我创建了一个测试用例（仅限 webkit）。代码也在下面复制。

我想要的是一个固定的标题和相对定位的内容。内容相对定位的原因是因为段落内部有一些元素是绝对定位的；虽然我在这个例子中省略了它们。

当然，添加position:relative到<p>（没有 a z-index）会导致内容堆叠在不希望的标题顶部。即如果CSS只是

#header {
  background-color:#f00;
  height:50px;
  width:100px;
  position:fixed;
}

p {
  width:100px;
  padding-top:50px;
  position:relative;
}

然后文本在标题上可见。所以我们z-index:1在标题中添加一个来解决这个问题。但是，这仍然没有解决旋转图像溢出标题的问题。我会认为一个简单overflow:hidden的标题会起作用。似乎直到页面滚动，固定标题也滚动。

它似乎是 and 的存在z:index，overflow:hidden虽然autoandscroll也破坏了布局，我想知道为什么？

z-index:1我可以在标题上使用 a而不是在标题z-index:-1上，<p>但这仍然不能解释为什么z:index,overflow和 CSS3 动画的组合会导致固定标题滚动。

最后（当然）删除可怕的旋转动画使标题按预期固定。请注意，我永远不会在页面上显示该动画，它只是为了突出问题:-)

显示问题的代码（仅适用于 webkit 浏览器）

HTML

<div id="header">
  <div id="spinner"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS

body, p {
  margin:0;
}

#header {
  background-color:#f00;
  height:50px;
  width:100px;
  position:fixed;
  z-index:1;
  overflow:hidden;
}

#spinner {
  background:url(http://lorempixel.com/40/40/abstract/1/);
  height:44px;
  width:44px;
  margin:2px 0 0 2px;
  -webkit-animation: spin 2s infinite linear;
}

@-webkit-keyframes spin {
  0% {-webkit-transform:rotate(0deg)}
  50% {-webkit-transform:rotate(720deg)}
  100%{-webkit-transform:rotate(1440deg)}
}

p {
  width:100px;
  padding-top:50px;
  position:relative;
}
4

2 回答 2

4

尝试添加：

-webkit-transform: translate3d(0, 0, 0);
transform : translate3d(0, 0, 0);

到页面上的固定元素。它的动画似乎需要被告知它们应该存在于哪个透视图中，将 3d 设置为 0 将意味着 2d。

于 2013-05-20T13:07:22.810 回答
1

这当然是一个奇怪的行为，可能是一个 webkit 错误，但我设法通过嵌套一个额外的 div 解决了这个问题。

HTML

<div id="header">
    <div id="fix">
        <div id="spinner"></div>
    </div>
</div>

CSS

#header {
  background-color:#f00;
  height:50px;
  width:100px;
  position:fixed;
  z-index:1;
}
#fix{
  height:100%;
  overflow:hidden;
}

看看这个 jsfiddle：http: //jsfiddle.net/C95nq/23/

无论出于何种原因，属性组合都会中断，但将溢出：隐藏到它自己的 div 似乎可以解决问题。

于 2013-01-30T16:55:47.430 回答