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

无法在带 z-index 的徽章后面获得 CSS 背景

Can't get a CSS Background behind a badge with z-index

html

css

z-index