css - z-index の問題のドロップダウンがコンテンツの下に表示されます

Question

一番上の棚の項目の下にドロップダウン メニューが表示されている理由が、一生わかりません。Z インデックスと位置は正しく設定されていますが、何かが足りないか、間違った場所にあるだけです。

誰でもここで私を助けてください。

ページへのリンク: http://www.chelleon.co.uk/environ-skincare

Answer 1

headerあなたのdivのz-indexはz-index:1;

あなたのz-indextop-shelf-productsはz-index:1;

ヘッダーの div を次のように変更しますz-index:2;

Answer 2

これを機能させるには、z-index を .header に適用する必要があります。

.header {
    .....
    z-index: 1;
}

その理由は、z-index を親に配置する要素は、その要素の上に表示されているものよりも高い z-index を持っていないためです...confused with my text, cus i am!