html - 无法使用 z-index 获得徽章背后的 CSS 背景

Question

我有两个图形元素:一个区域徽章 (EUW) 和一个售罄邮票。我希望邮票位于地区徽章的前面。我一直认为这是我可以使用 z-index 的东西，但这对我不起作用。

这是我的问题的图片:

我的 CSS:

.region-badge {
    position: absolute;
    top: 26px;
    right: 26px;
    background: url(../images/region_badge.png) no-repeat;
    height: 47px;
    width: 47px;
    display: block;
    line-height: 47px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    z-index: 1;
}
.sold-out {
    position:relative;
}
.sold-out::before{
    content: url(../images/sold_out_stamp2.png);
    transform: scale(.5);
    position:absolute;
    z-index: 40;
    top:-50px;
    left:70px;
}

我的 HTML:

<div class="rotate sold-out">
    <a href="images/packages/background01.jpg" rel="imagebox" title="SockMonkee">
        <img src="images/packages/background01.jpg" alt=""/></a>
</div>
<div class="region-badge">euw</div>

Answer 1

试试这个，

<div class="rotate sold-out">
    <a href="images/packages/background01.jpg" rel="imagebox" title="SockMonkee">
        <img src="images/packages/background01.jpg" alt=""/>
    </a>
   <div class="region-badge">euw</div>
</div>