将元素定位在彼此之上

Question

我有一个被图像隐藏的下拉，如下图所示。我希望下拉列表位于图像的顶部。我怎么能这样做？

是通过CSS完成的吗？

Answer 1

您可以通过将更多z-index放入下拉列表

来实现此目的

  

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

喜欢

img{
  z-index:5;
}

.dropdown{
   z-index:6;
}

  

注意： z-index仅适用于定位元素（位置：相对，位置：绝对或位置：固定）。

.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 
}

<子> <子> <子>

Answer 2

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