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设置为子...这应该做，而不仅仅是{{1} }}，top ...留在它应该的地方

bottom

Z-index不能与背景图像一起使用

1 个答案: