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

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

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

解决方法

我实际上还不知道为什么CSS动画会破坏布局.在我的测试中,动画正在运行,溢出：隐藏;标题上的z-index导致它失去固定定位！但是,我确实有答案.

首先,删除

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

来自固定位置标题元素< div id =“header”>.

但是,删除了这3个属性后,< div id =“slide-contains”/>仍会重叠！这是因为隐式堆叠上下文分层,请参阅CSS_absolute_and_fixed_positioning#The_third_dimension文章中的7个层.

发生不需要的重叠是因为在< div id =“slide-contains”/>上设置了position：relative. (它是< div id =“包装器”/>的后代)但该元素上没有z-index.我意识到添加了相对定位是因为你想要将一些子元素放在里面.

因此< div id =“slide-contains”/>元素与页面上没有z-index的每个其他元素位于同一Z平面上,其中包括固定标题.这两个元素都在第6级 – 定位后代,堆栈级别设置为auto或(零),根据链接文章和堆叠默认值到元素在DOM上显示的顺序,所以< div id =“slide -contain“/>被渲染过`. 所以标题上需要一个z-index：1来始终将标题呈现在顶部.它只需要大于0,所以将z-index：99更改为z-index：1 另一种解决方案是在以下兄弟< div id =“wrapper”/>上提供负z-指数(和位置：相对).

您可能会认为在< div id =“slide-contains”/>上添加负z-index.这将是足够的,但它需要复制到元素祖先,否则< div id =“slide-contain”/>将被推到其父母身后.

原文地址：https://www.jb51.cc/css/217379.html