Question

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

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

Answer 1

将CSS设置为消失元素

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

transform属性translated3d不存在。 translate3d可以，并且应该在同一页面上使用动画元素解决固定定位。

Answer 2

编辑：用户@jacob指出这是一种错误的方法，可能会对性能产生负面影响。任何强制硬件加速的属性都可以解决问题，但是不要全局应用此规则，而是尝试将此规则应用于仅中断的元素。

在zimate将animate.css与基础结合时遇到了类似的问题。

我根据Ryan Wu的回答提出的解决方案

* {
backface-visibility: hidden;
}

它适用于我的问题（固定元素在动画期间丢失填充/边框和其他恶意）

Answer 3

我实际上还不知道为什么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"/> 在那个元素上。我意识到添加了相对定位是因为你想要将一些子元素放在里面。

因此，<div id="slide-contain"/>元素与页面上没有z-index的每个其他元素位于同一Z平面上，其中包含固定标头。这两个元素都位于 Level 6 - 定位后代，堆栈级别设置为auto或（零），根据链接文章和堆叠默认值到顺序，其中元素出现在DOM上，所以z-index:1呈现在`。
上
因此标题上需要z-index:99才能始终将标题呈现在顶部。它只需要大于0，因此将z-index:1更改为z-index

另一种解决方案是在以下兄弟position:relative上提供否定 <div id="wrapper"/>（以及z-index）。

您可能认为在<div id="slide-contain"/>上添加否定<div id="slide-contain"/>就足够了，但是需要复制元素祖先，否则{{1}}会被推到其父级之后。< / p>

Answer 4

我相信这个错误发生是因为容器的动画被卸载到GPU;然而，固定定位将后代带出流动，因此它不会随着容器一起卸载。然后固定位置元素被错误地合成。将任何硬件加速属性（ex translate3d）添加到固定定位元素似乎“修复”了问题（我相信因为它也会卸载到GPU，避免在合成期间出现问题）。

实施例

<div class="container">
  <div class="fixed"></div>
</div>

.container {
  animation-duration: 0.8s;
  animation-name: some-animation;
}

.fixed {
  /* transform: translateX(-200%); */
  transform: translate3d(-200%, 0, 0);
  position: fixed;
  top: 10rem;
}

Answer 5

background: url(../assets/logo.png) center no-repeat,url(../assets/header2.jpg) bottom center;
height: 50px;
width: 100%;
border-bottom: 5px solid black;
position: fixed;
text-align: center;
z-index: 99;

试试这个它会起作用。

但是你的内部html在使用float div时也存在问题，所以如果你想使用overflow：hidden或auto，你也应该使用clear class。

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

5 个答案: