CSS3动画在页面滚动时打破固定定位

Question

我无法弄清楚为什么chrome(这使得固定标头完全消失,Firefox保持它在那里,但让绝对定位元素流过固定元素,我已经使用不透明度避免了问题:.99,但我仍然我的想法是如何做到这一点来解决它.

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

Answer 1

我仍然不知道为什么 CSS 动画会破坏布局。在我的测试中，随着动画的运行，overflow:hidden;z-index标题上的内容会导致它失去固定位置！不过，我确实有一个答案。

首先，删除

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

来自固定位置标题元素<div id="header">。

然而，删除这 3 个属性后，它们<div id="slide-contain"/>仍然会重叠！这是因为隐式堆栈上下文分层，请参阅CSS_absolute_and_fixed_positioning#The_third_dimension文章中的 7 层。

出现不需要的重叠是因为position:relative已在<div id="slide-contain"/>( 的后代<div id="wrapper"/>) 上设置，但该元素上没有z-index设置。我意识到添加了相对定位是因为您想要将某些子元素绝对定位在其中。

因此，该<div id="slide-contain"/>元素与页面上没有 z 索引的所有其他元素位于同一 Z 平面上，其中包括固定标头。两个元素都位于6 级 - 定位后代，堆栈级别设置为 auto 或 (零)，根据链接的文章，堆栈默认为元素在 DOM 上出现的顺序，因此<div id="slide-contain"/>在 ` 上渲染。

因此，标题上需要 az-index:1来始终将标题呈现在顶部。只需要大于0即可，所以z-index:99改为z-index:1

另一种解决方案是在以下同级上提供负值 z-index（和） 。position:relative<div id="wrapper"/>

您可能认为z-index在 the 上添加一个负数<div id="slide-contain"/>就足够了，但它需要复制到元素祖先，否则<div id="slide-contain"/>将被推到其父元素后面。