html - Z-index 不适用于背景图像

Question

对于以下 CSS -

.competition .banner .image {
    background: url("{{ STATIC_URL }}images/comp-banner.jpg") no-repeat;
    display: inline-block;
    position: relative;
}

和 HTML -

    <div class="banner">
        <span class='image'>
        </span>
    </div>

    <div class="info">
        <div class="main-info">
            {{ competition.description }}
        </div>
    </div>

我不知道如何将 description 放在背景图片之上。我已尝试为所有 div、span 等设置 Z-index，但似乎没有任何效果。我如何将文本放在此处的背景图片之上？

Answer 1

但是描述在 main-info 里面...设置 position: relative 到主 div 和 position: absolute; z-index: 50 给 child ...这应该做到，而不是只做一些 top,bottom...留在它应该的地方

.info {
    background: url("{{ STATIC_URL }}images/comp-banner.jpg") no-repeat;
    display: inline-block;
    position: position absolute;
}
.main-info{
position: relative; z-index: 50;
}

    <div class="info">
        <div class="main-info">
            {{ competition.description }}
        </div>
    </div>