CSS3动画在页面滚动时打破固定定位 [英] CSS3 animations breaking fixed positioning when page scrolled

问题描述

我有麻烦试图找出为什么chrome（这使得固定标题完全消失，Firefox保持它，但让绝对定位的元素流过固定的元素，我已经避免了使用不透明度的问题：.99，但我仍然怀念我如何做任何事情来解决它。

http://www.rickpascua.cu.cc/newsite-snazzy/index.html < ---问题页面。

解决方案

我还是不知道为什么CSS动画打破布局在我的测试中，动画运行， overflow：hidden; z-index

首先，删除

  overflow：hidden; 
 visibility：visible; 
 z-index：99; 
  

从固定位置标题元素< div id =header> 。

但是删除了这3个属性后，< div id =slide-contain/> 仍然会重叠！这是因为隐式堆叠上下文分层，请参见中的7个图层CSS_absolute_and_fixed_positioning＃The_third_dimension article。

不必要的重叠发生是因为 position：relative < div id =slide-contain/> （这是< div id =wrapper/& ），但在该元素上有无 z-index 。

因此，< div id =slide-包含/> 元素与在页面上没有z索引的每个其他元素在相同的Z平面上，其包括固定标题。两个元素都位于 Level 6 - 根据链接的文章和堆栈默认值，将堆栈级别设置为auto或（零）的定位后代 元素在DOM上显示的顺序，因此< div id =slide-contain/>

因此，在标题上需要一个 z-index：1 来始终在顶部显示标题。它只需要大于0，因此将 z-index：99 更改为 z-index：1 p>

另一个解决方案是提供负 z-index code>< div id =wrapper/> 。

您可能认为在< div id =slide-contain/

上添加一个否定 z-index > 将足够，但它需要复制到元素祖先，否则< div id =slide-contain/> 将被推送到其父级之后。

I'm having trouble trying to figure out why chrome (which makes the fixed header completely disappear, Firefox keeps it there but lets absolutely positioned elements flow over the fixed element, I've averted the problem using opacity:.99, but I still wracks my mind how that does anything to fix it.

http://www.rickpascua.cu.cc/newsite-snazzy/index.html <--- problem page.

解决方案

I still don't actually know why the CSS animation is breaking the layout. In my testing, with the animations running, having overflow:hidden;z-index on the header was causing it to lose fixed positioning! However, I do have an answer.

To begin with, remove

overflow:hidden;
visibility:visible;
z-index:99;

from the fixed position header element <div id="header">.

However with those 3 properties removed, the <div id="slide-contain"/> will still overlap! This is because of the implicit stacking context layering, see the 7 layers in the CSS_absolute_and_fixed_positioning#The_third_dimension article.

The unwanted overlap occurs because position:relative has been set on the <div id="slide-contain"/> (which is a descendent of the <div id="wrapper"/>) but there is no z-index on that element. I realise that the relative positioning was added because you want to absolutely position some child elements inside.

Therefore the <div id="slide-contain"/> element is on the same Z-plane as every other element without a z-index on the page, which includes the fixed header. Both elements are at Level 6 - Positioned descendants with the stack level set as auto or (zero), according to the linked article and stacking defaults to the order in which the elements appear on the DOM, so the <div id="slide-contain"/> is rendered over `.

So a z-index:1 is required on the header to always render the header on top. It just needs to be greater than 0, so change z-index:99 to z-index:1

An alternate solution would be to supply a negative z-index (and position:relative) on the following sibling <div id="wrapper"/>.

You might think that adding a negative z-index on the <div id="slide-contain"/> would be enough but it would need duplicating to the element ancestors, otherwise the <div id="slide-contain"/> would be pushed behind its parent.

这篇关于CSS3动画在页面滚动时打破固定定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！