Is there a way to adjust the z-index of the drop-down autocomplete box so that it appears above a background image?
Take a look at this screenshot:
https://i.sstatic.net/H90jV.png
The four images below are background images styled with sprite CSS. The area box represents the drop-down autocomplete, with its position set to absolute and z-index set to 100. Despite this, it is still not overlapping the background image.
Here is the CSS code for the drop-down box and the section below it:
Drop Down Box:
.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;
}
Section Below:
.hero-banner {
color: #555;
padding-top: 50px;
padding-bottom: 50px;
background-color: #EFEDEB;
border-bottom: 1px solid #D2D2D2;
}
Sprite 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;
}
Even the title and description text seems to be overriding the desired style.