将图像放在2个div之间，以z-index为基准

Question

我试图用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;
}

你可以看看我的例子 在这个JSFiddle.

有谁知道为什么我的图片在PreviewArrowUl下？

Answer 1

absolutely定位的元素应总是重叠在图片上。static盟友定位的元素（默认）。

这里的解释是...

的优先级是 z-index 是这样的

1. 画布
2. bg图片
3. z-index: -1
4. 默认(0)
5. z-index: 1+

所以当你给任何一个子元素的z-index为-1时，它不会因为父母的优先权而低于父母的背景。另外，z-index只适用于已定位的元素。. 因此，在没有分配任何位置的情况下，将z-index分配给一个元素（即使默认为 static)不会对其产生任何影响。position in stack .