![](/img/trans.png)
[英]advance z-index with positioning drop-down menu over higher div z-index
[英]how can i override z-index of drop-down auto complete over background image?
如何在背景图片上设置下拉自动完成框的z-index
?
这是屏幕截图:
下面四幅图像是带有sprite CSS的背景图像,区域框是下拉自动完成的,其position
设置为absolute
, 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;
}
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;
}
即使标题和描述文本也被覆盖。
.hero-banner {
z-index: 0;
}
要么
我不知道它是整个div还是带有图标的第三个孩子在上面的位置。
.why_casebox {
z-index: 0;
}
因此该图片将位于下拉列表的后面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.