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

标签 html css

对于以下 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 放在背景图片之上。我已尝试为所有 divspan 等设置 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/

相关文章:

母版页和内容占位符中的 Javascript 验证

css - Bootstrap 列表组中的垂直对齐文本

javascript - HTML 表 JQuery 自动小时总计

javascript - 如何根据 JSON 文件中的 bool 值自动添加过滤器

html - 翻转两个不同的图像并在悬停时停止

android - 是否可以为网页(移动设备)的 "over scrolled"(退回)区域设置图像?

javascript - 如何在不使用 z-index 的情况下使用 css 网格反向堆叠元素?

CSS box-shadow 属性调整

html - 跨浏览器 CSS 复选框问题

html - 为什么下载的字体在网站上不起作用?