固定位置丢失，溢出隐藏和CSS3动画(Fixed position lost with overflow hidden and CSS3 animation)

继CSS3动画在页面滚动时打破固定定位我创建了一个测试用例（仅限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在标题上会起作用。似乎在页面滚动之前，固定标题也会滚动。

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

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

Following on from CSS3 animations breaking fixed positioning when page scrolled I have created a test case (webkit only). Code is copied below also.

What I want is a fixed header and relatively positioned content. The reason the content is relatively positioned is because there are certain elements that are absolutely positioned inside the paragraph; although I've omitted them from this example.

Of course adding position:relative to the <p> (without a z-index) causes the content to be stacked on top of the header which is not desired. i.e. if the CSS is just

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

then the text is visible over the header. So we add a z-index:1 to the header to fix that. However, this still doesn't address the problem of the spinning image overflowing the header. I would have thought a simple overflow:hidden on the header would work. It seems to until the page is scrolled, whereupon the fixed header also scrolls.

It seems to be the presence of z:index and overflow:hidden, although auto and scroll also break the layout and I want to know why?

Instead of z-index:1 on the header I could use a z-index:-1 on the <p> but that still doesn't explain why the combination of z:index, overflow and the CSS3 animation causes the fixed header to scroll.

Lastly (and of course) removing the awful spinning animation makes the header fixed as expected. Please note, that I wouldn't ever have that animation on a page, it's just there to highlight the problem :-)

Code showing the problem (only for webkit browsers)

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; }