z-index属性不处理带有图像的容器。

Question

不知道我可能做错了什么，我试着这样说：

.container-image{
    background: url('http://i.imgur.com/Dl8UBO7.png');
    width: 226px;
    height: 169px;
    display: inline-block;
    position: relative;
    z-index: 20; // dont work
}

.container-image img{
    position: absolute;
    left: 14px;
    top: 13px;
    width: 199px;
    height: 141px;
    z-index: 10; // dont work
}

小提琴

我需要图像在边缘后面(容器-图像)

Answer 1

在边界div和图像周围放置一个容器。http://jsfiddle.net/7fqAu/2/

<div class='example'>
    <div class="container-image"></div>
    <img src="http://i.imgur.com/T0KMwIs.jpg">
</div>

body {
    background: red;
}
.container-image {
    background: url('http://i.imgur.com/Dl8UBO7.png');
    width: 226px;
    height: 169px;
    position: relative;
    z-index: 20;
}
.example {
    width: 226px;
    height: 169px;
    position: relative;
}
.example img {
    position: absolute;
    left: 14px;
    top: 13px;
    width: 199px;
    height: 141px;
    z-index: 10;
}

Answer 2

您可以将边框图像添加到.container-image:after中，而不是作为.container-image的背景--那么根本不需要z索引。

小提琴手