レイアウト/インデックスの問題？

Question

私のウェブサイトには、jQueryのclick関数を介してアニメーション化されたdivがあり、それは$(document).ready()にアニメーション化されたdivに表示されます。ただし、これらのdivの後ろには、ウェブサイトのホームページにのみ表示され、他のページには表示されず、携帯端末でのみ表示されます。

ホームページで：他のページで

：

ページの2種類の唯一の違いは、それがホームページ上で、ナビゲーションメニューとルーズリーフのdivはアニメートのように

ナビゲーションメニューの場合：

flipInBottomBackで

setTimeout(function(){ 
      $('#avmenu ul li').each(function(i) { 
       var $fc = $(this); 
       setTimeout(function() { 
        $fc.addClass('flipInBottomBack').css({'pointer-events':'auto'}); 
        }, i*250); // delay 250 ms 
       }); 
      }, 6000); 

opacity: 1への移行、冒頭にopacity: 0とCSSのキーフレームアニメーションであること。

looseleaf divは、アニメーションクラス自体に設定された遅延で、CSSキーフレームアニメーションを使用してアニメーション化されますが、 、およびナビゲーションメニューのためにこのコードを実行することにより、それらは単にルーズリーフ用のdivのアニメーションクラスを削除することによって示されているが、他のページで

#welcome-box { 
    width: 681px; 
    height: auto; 
    position: absolute; 
    top: 160px; 
    background: url(https://dl.dropbox.com/s/ab9udqlsxbxaelw/LooseLeafExtended.png); 
    background-size: cover; 
    border-radius: 10px; 
    box-shadow: 0 0 10px 5px #000; 
    opacity: 0; 
} 

：それは、次のCSSスタイルを持っている

$('#avmenu ul li').show().css({'opacity':'1'}); 

私はCSSのインデックス属性で遊んだことがありますが、宿題のdivが最高のインデックスを持っていても動作しないようです。なぜdivは、ホームページ以外のすべてのページにも表示されますか？

Answer 1

コードにz-indexを含めてください。

#welcome-box { 
width: 681px; 
height: auto; 
position: absolute; 
top: 160px; 
background: url(https://dl.dropbox.com/s/ab9udqlsxbxaelw/LooseLeafExtended.png); 
background-size: cover; 
border-radius: 10px; 
box-shadow: 0 0 10px 5px #000; 
opacity: 0; 
z-index: 12; 
} 

上位のdivに基づいてz-indexの値が変更されることがあります。