无法在带有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>