我如何覆蓋下拉自動完成的背景圖像z-index？

Question

enter image description here

我該如何設置z-index下拉自動完成框在背景圖像上？

以下4張圖片是帶有sprite css 的背景圖片，區域框下拉自動完成，它有絕對位置和z-index：100，但仍不重疊背景圖片。

這裏是CSS的下拉框和下面的部分

*下拉框中*

.tt-dropdown-menu, .tt-menu 
{ 
    position: absolute; 
    top: 79%!important; 
    left: 9px!important; 
    z-index: 1000; 
    min-width: 160px; 
    width: 94%; 
    padding: 5px 0; 
    margin: 2px 0 0; 
    list-style: none; 
    font-size: 14px; 
    background-color: #ffffff; 
    border: 1px solid #cccccc; 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    border-radius: 0px!important; 
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 
    background-clip: padding-box; 
} 

下面的部分

.hero-banner 
{ 
    color: #555; 
    padding-top: 50px; 
    padding-bottom: 50px; 
    background-color: #EFEDEB; 
    border-bottom: 1px solid #D2D2D2; 
} 

****雪碧的CSS ****

.why_casebox 
{ 
     background-image: url(../images/why-casebox/why_casebox.png); 
     background-repeat: no-repeat; 
     display: block; 
     margin: auto; 
    } 
.sprite-verified 
{ 
    width: 128px; 
    height: 128px; 
    background-position: -143px -143px; 
} 

即使標題和說明文字也覆蓋

enter image description here

Answer 1

.hero-banner { 
    z-index: 0; 
} 

或

我不知道它是整個div的位置還是帶有圖標的第三個孩子。

.why_casebox { 
    z-index: 0; 
} 

這樣圖像將位於下拉菜單後面。