2

我有一个被图像隐藏的下拉菜单，如下图所示。我希望下拉菜单位于图像的顶部。我怎样才能做到这一点？

图像部分隐藏的下拉菜单

它是通过CSS完成的吗？

4

2 回答 2

3

您可以通过将更大z-index的下拉菜单来做到这一点

具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。

像

img{
  z-index:5;
}

.dropdown{
   z-index:6;
}

注意： z-index 仅适用于定位元素（position:relative、position:absolute 或 position:fixed）。

.photo-thumb {
    margin-top: 20px;
    position: relative;
    width: 160px;
    z-index: 6;  <------- you have z-index 6 here 
}

和

.menu ul {
    background: none repeat scroll 0 0 #1F2024;
    border-radius: 0 0 5px 5px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 40px;
    transition: opacity 0.25s ease 0.1s;

    z-index: 7; <-----this is the key try z-index 7 here 
}

jsFiddle

于 2012-12-05T10:10:44.387 回答
0

最好的方法是使其成为元素的背景图像，而不是实际的图像标签

于 2012-12-05T10:11:57.757 回答