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

继之后，我创建了一个（仅限webkit）。代码也复制到下面

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

当然，将

位置：relative

添加到

（不带

z-index

）会导致内容堆叠在不需要的标题顶部。i、 e.如果CSS只是

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

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

然后文本在标题上方可见。因此，我们在标题中添加了一个

z-index:1

，以解决这个问题。然而，这仍然不能解决旋转图像溢出标题的问题。我本以为一个简单的

溢出：在标题上隐藏
就行了。直到页面被滚动，固定的标题也随之滚动

似乎出现了
z:index
和
overflow:hidden
，尽管
auto
和
scroll
也破坏了布局，我想知道为什么？

代替标题上的
z-index:1
，我可以在
上使用
z-index:-1
，但这仍然不能解释为什么
z:index
、
溢出
和CSS3动画的组合会导致固定标题滚动

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

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

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

HTML

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

查看这个JSFIDLE：

无论出于何种原因，属性组合会中断，但移动溢出：隐藏到自己的div似乎可以解决问题。尝试添加：

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

到页面上的固定元素。动画似乎需要被告知它们应该存在于哪个透视图中，将3d设置为0意味着2d。
只需将div移动到段落后面，就可以模拟z索引。只要你把它定位到你想要的位置，并移除z索引，它看起来就可以工作。啊，你有关于这方面的参考文章吗？刚刚再次测试了最初的演示，现在它在Chrome26中似乎工作正常，没有任何额外的CSS。也许这是一个现在已经修复的bug。你在使用哪个浏览器？同一个Chrome 26，我的案例场景是，当我有一个动画元素被隐藏并用JS显示时，引导导航栏会分离。“将…添加到页面上的固定元素”-谢谢！！将其放在父元素上并丢失了固定属性。
<div id="header">
    <div id="fix">
        <div id="spinner"></div>
    </div>
</div>

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

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