フローティング画像の上にドロップダウンメニューを重ねる

Question

私は中小企業向けのウェブサイトを設計しており、2つのことを望んでいると言いました。ドロップダウンメニュー、およびメインページのスライドショー。スライドショーを浮かせて、ページの残りの部分に干渉しないようにしなければならない場合は、これは問題ありません（サイドメニュータイプのもの）

問題は画像がドロップダウンメニューの上にオーバーレイされることです私が見ることができる唯一の解決策は、イメージを移動するか完全に取り除くことです。私がどちらかをする必要がなければ素晴らしいだろうが、妥協をすることができる。

ドロップダウン・コードは、この（それのためのW3にクレジット）である：

`.dropbtn { 
    background-color: #73797A; 
    color: white; 
    padding: 3px 7px 4px 1px; 
    font-size: 35px; 
    border: none; 
    cursor: pointer; 
    margin-top: 30px; 
    border-right-style: solid; 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f4f4f4; 
    min-width: 100%; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    width: 100%; 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.dropdown:hover .dropbtn { 
    background-color: #30DAFC; 
}` 

Answer 1

Zインデックスと呼ばれるCSSプロパティがありますが、それはHTML内の要素のスタックを定義します。見てください：CSS z-index