Question

从CSS3 animations breaking fixed positioning when page scrolled开始，我创建了一个test case（仅限webkit）。代码也在下面复制。

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

当然，将position:relative添加到<p>（没有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会起作用。似乎在页面滚动之前， fixed 标题也会滚动。

似乎存在z:index和overflow:hidden，虽然auto和scroll也打破了布局，我想知道为什么？

标题上的z-index:1而不是z-index:-1我可以在<p>上使用z:index，但这仍然无法解释为什么{{1}的组合}，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;
}

Answer 1

尝试添加：

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

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

Answer 2

这当然是一种奇怪的行为，可能是一个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似乎可以解决问题。

固定位置丢失，溢出隐藏和CSS3动画

HTML

CSS

2 个答案: