画像のZ-インデックスを変更すると、画像のZ-インデックスが変更されます。

Question

ユーザーがページ上をスクロールすると画像がフェードアウトします。

このJSFiddleは、このページの最小例です。

問題は次のとおりです。不透明度の値がangularjsによって適用されると、何らかの形で退色すべき画像のZ-インデックスが変化するように見えます。
ng-styleタグを削除すると、画像が実際には固定のnavbarの後ろにあることがわかります。
しかし、ngスタイルのタグでは、画像はnavbarの上にあります。それはレイヤーに来るとき

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" 
     ng-class="{'header-img-text' : true}"> 

を使用して

ので、代わりの

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" 
     ng-class="{'header-img-text' : true}" ng-style="{opacity : headerTextOpacity}"> 

は正しい動作を提供します。しかし、不透明度はそれほど高くはない（明らかに）。

これを防ぐ方法はありますか？これはどのように正しく行われますか？

Answer 1

nav-barにz-indexを追加すると問題が解決します..