Z-Indexがスティッキー要素で機能しないのはなぜですか？

Question

私は、スティッキーフッタにいくつかのロールオーバーエフェクトを持ち、上部にスティックされた反応的なメニュー/ナビを持っています。ナビゲーションが開かれ、フッターを移動するのに十分な長さのとき、ロールオーバー以外のすべてをカバーします。

nav closed http://www.musictheorytutorials.com/navclosed.png

nav open http://www.musictheorytutorials.com/navopen.png

私は、多くの変更を試してみましたが、ここで検索して、それが動作していないの例として、jsfiddleで簡単なバージョンを再構築しようとしましたが、それは働きました！しかし、私の実際のページにこれらの変更を行っません...ここで

が作業を行いjsfiddleです：/ m_d_a/y7Lj3rms/26/

ここではないRGEのjsfiddleがある：/ m_d_a/4bLyt681/5/

コードタグを切り取って貼り付けるときに正しく機能しない、残念です。

多くのjavascriptがありますが、そのほとんどは私が理解していないリンクされたjsプラグインファイルから切り取って貼り付けられているので、そこに何かあると思います。もし誰かがこれを突き抜けることができたら、私は本当にそれを感謝します。私はこの質問のタイトルを将来の人々を助ける働きかけの答えを反映するように変更する予定です。

ありがとうございます。

Answer 1

だけ

.menu { 
    z-index: 100 !important; 
}