CSS3動畫打開頁面滾動時的固定位置

Question

我在試圖弄清楚爲什麼會出現問題（這會使固定標題完全消失，Firefox將它保留在那裏，但讓絕對定位的元素流過固定元素，我已避免這個問題用不透明度：0.99，但我仍然wracks我的心怎麼說做任何事情來修復它

http://www.rickpascua.cu.cc/newsite-snazzy/index.html < ---問題頁

Answer 1

我還是不明白爲什麼CSS動畫會破壞佈局。在我的測試中，動畫正在運行，頭上有overflow:hidden;z-index，導致它失去了固定位置！但是，我確實有一個答案。

首先，從固定位置標頭元素<div id="header">除去

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

。

但是，除去這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 - 根據鏈接的文章和堆棧默認值爲的順序，堆棧級別設置爲自動或（零），其中元素顯示在DOM上，因此<div id="slide-contain"/>已呈現超過`。

因此，在標頭上需要一個z-index:1以始終將標頭置於頂部。它只是需要大於0，所以改變z-index:99到z-index:1

一種替代的解決方案是在以下同級<div id="wrapper"/>供給負z-index（和position:relative）。

您可能認爲在<div id="slide-contain"/>上添加負值z-index就足夠了，但它需要與元素祖先重複，否則<div id="slide-contain"/>會被推到其父項之後。

Answer 2

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; 

試試這個它會工作

。

，但在使用float div的標題div中也存在問題，因此如果要使用overflow：hidden或auto，則應該使用clear class。

Answer 3

設置以下CSS到消失的元素

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

的transform屬性translated3d不存在。translate3d確實，並且應該解決在同一頁面上使用動畫元素的固定位置。

Answer 4

編輯：user @ jacob指出這是一種錯誤的方法，可能會對性能產生負面影響。任何強制硬件加速的屬性都可以實現，但不是全局應用此規則，而是將此規則應用於僅打破的元素。

剛剛遇到類似的問題時，通過zurb結合animate.css和基礎。

我想出了基於瑞安吳的回答

* { 
backface-visibility: hidden; 
} 

它的工作對我的問題（固定元素的動畫過程中丟失填充/邊框和其他髒東西）

Answer 5

我相信這個錯誤是因爲該解決方案容器的動畫被卸載到GPU;但是，固定定位將後代從流中取出，因此不會隨容器一起卸下。然後固定位置元素被錯誤地合成。將任何硬件加速屬性（例如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; 
}