Chromeで積み上げ注文の問題が発生する

Question

ChromeとSafariで折り畳まれたドロップダウンメニューがsequence.jsスライダーの後ろに隠れています。 Firefoxで問題が発生していないようです。スライダとメニューに関連するほぼすべてのオブジェクトでZインデックスを変更しようとしました。私のサイトを調べて、私が間違っていることを教えてくれる人には、大いに愛しています。

https://www.shopinspired.co/

Answer 1

それは実際には、スライドショーの背後に隠されていません。

これは、ページの上部にスクロールしたときにヘッダーから「スティッキー」クラスが削除されたためです。 #headerに.stickyが指定されている場合、メニューは正常に表示されます。

"ヘッダー"だけでなく、ページ上部のスタイルが "header.sticky"をターゲットにしているようです。

修正：手動でCSSを追加：

#header { 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0px; 
    box-shadow: 0 5px 5px -5px #333; 
} 

のか、 "ヘッダ" をターゲットにするページの先頭にCSSを変更します。

Answer 2

説明

ITSはstickyヘッダと配置オブジェクトと強制高さのミスマッチから来ています。

デフォルトでは、スティッキーヘッダーが表示されていないため、サブメニューは一部のメディアクエリによって強制的な高さを持つ親の子要素であるため非表示になっています。オーバーフローが隠されています。

ヘッダが追加されると、ヘッダはfixedの位置になります。 fixed elementsを基準にabsoluteポジショニングを使用することはできません。私はあなたの要素が文書ウィンドウに相対的な位置に置かれていると推測しています。なぜそれがfixed属性で表示されているのですか？