使用z-index将图像放在2 div之间

Question

我尝试在.previewSlide div和.PreviewArrowUl之间用z-index定位图像。

.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下？

Answer 1

absolute定位元素应始终与static盟友定位元素重叠（默认）。

这里的解释......

z-index的优先顺序如下

1. canvas（绘制元素/父项可绘制区域）
2. bg images
3. z-index：-1
4. 默认（0）
5. z-index：1 +

因此，当您为任何子元素指定z-index为-1时，由于父级优先级，它不会低于父级背景。 此外，z-index仅适用于定位元素。因此，将z-index分配给未分配任何位置的元素（即使默认为static）也不会对其position in stack产生任何影响。