我尝试使用 z-index 将图像定位在 .previewSlide div 和 .PreviewArrowUl 之间。
.previewSlide 的 z-index 是 1,.PreviewArrowUl 是 5,我的 img 是 20 但 PreviewArrowUl 在 img 上。
.previewSlide {
height: 110px;
background-color: #484848;
z-index: 1;
overflow: hidden;
position: relative;
}
.PreviewArrowUl {
position: absolute;
background: #9b9b9b;
height: 125px;
width: 185px !important;
z-index: 5;
left: 185px;
top: 0px;
background-color: #9b9b9b;
}
.previewSlide ul li img {
width: 155px;
height: 85px;
float: left;
z-index: 20;
position: relative;
}
你可以查看我的例子in this JSFiddle .
有人知道为什么我的图像在 PreviewArrowUl 下吗?
最佳答案
absolute
ly 定位的元素应始终与 static
ally 定位的元素重叠(默认)。
这里是解释...
z-index
的优先级如下
- canvas(绘制元素的地方/父元素的可绘制区域)
- 背景图片
- z-index: -1
- 默认 (0)
- z-index: 1+
因此,当您将任何子元素的 z-index 设置为 -1 时,由于父元素的优先级,它不会低于父元素的背景。 此外,z-index 仅适用于定位元素。因此,将 z-index 分配给没有分配任何位置的元素(即使默认为 static
)不会对其在堆栈中的位置
产生任何影响。
关于css - 将图像放在带有 z-index 的 2 个 div 之间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34589909/