对于以下 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,但似乎没有任何效果。我如何将文本放在此处的背景图片之上?
最佳答案
但是描述在 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>
关于html - Z-index 不适用于背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9048875/