フルスクリーンメニューのフェードは、svgと画像では機能しません。

Question

滑らかなフェードインとフェードインでフルスクリーンメニュートグルを作成しようとしています。

これは、svg要素と画像を除くすべての要素で正常に動作します。

メニューバーガーをクリックすると、イメージとSVGアイコンがはっきりと見え、他のものはすべて消えませんが、これらの要素は表示されません。

私はそれがZ-インデックスに関連する問題であり、番号を変更したと思ったが、何も働かなかった。

私は数日間このことに関する情報を見つけようとしてきましたが、何も見つかりませんでした。

私はあなたの助けに感謝します、ありがとうございます。

Heres my fiddle

とコード：

(function() { 

    "use strict"; 

    var toggles = document.querySelectorAll(".c-hamburger"); 

    for (var i = toggles.length - 1; i >= 0; i--) { 
     var toggle = toggles[i]; 
     toggleHandler(toggle); 
    }; 

    function toggleHandler(toggle) { 
     toggle.addEventListener("click", function (e) { 
      e.preventDefault(); 
      (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") || $("#testMenu").fadeOut(300) : this.classList.add("is-active") || $("#testMenu").fadeIn(300); 
     }); 
    } 

})(); 

Answer 1

メニューコンテナはソース画像の前に表示されているので、それがZ軸方向に低い屈折率を有しているので、それが起こります。 z-indexを制御するにはz-indexとposition:relative

<nav id="testMenu" style="display: none; z-index: 1000; position: relative;"> 

Answer 2

でトップに#testMenuを行い、要素はpositionを宣言するように、積層順序を持っている必要があります。

位置プロパティをミックスに導入すると、配置されている要素（およびその子）が配置されていない要素の前に表示されます。

この変更、例えば試してみてください。ここでは

#contact { 
    z-index: -1; 
    position: relative; 
    ... 
} 

はworking fiddle