Html Z索引不适用于css形状内的图像

我有以下情况：

我有一个css菱形，如下所示：

.diamond {
    border-style: solid;
    border-color: transparent transparent #9b59b6 transparent;
    border-width: 0 55px 60px 55px;
    height: 0;
    width: 300px;
    position: relative;
    margin: 20px 0 50px 0;
}
.diamond:after {
    content: "";
    position: absolute;
    top: 60px;
    left: -55px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #9b59b6 transparent transparent transparent;
    border-width: 150px 150px 0 150px;
}

结果是一颗非常漂亮的钻石。在钻石里面，我想放一张足够小的图片放进去

下面是图片的简单标记和propper css类：

.logo-sponsor{
  z-index: 1000;
  width: 250px; 
  height: auto;
  margin: 0 auto;
  display: block;
}

以及标记：

<div class="diamond">
  <img src="http://www.userlogos.org/files/logos/jumpordie/tigo_01.png" class="logo-sponsor">
</div>

一切似乎都很顺利，直到你预览它，你看到一半的钻石顶部的图片。我原以为简单的高

z-index

可以解决这个问题，但事实并非如此。有没有办法让那颗钻石“往回走”并把照片“带到前面”

---

这里有一个供您试验的方法。

添加

位置：相对至
。徽标赞助商


这就是你想要的吗

原因是，默认情况下，它是静态的，它会忽略
z-index

编辑：就像上面TylerH所说的，这里有很多好的信息：
你必须声明一个
位置
，才能应用
z-index
。谢谢！我会尽快给你答案。