css - html 中的图像不能与 Bootstrap 列重叠吗？

Question

一段时间后，我解决了一个困扰我的问题。不过，我希望有人能向我解释解决方案，因为我不明白它为什么有效，而我通常这样做的方式这次却没有。

我的目标是将图像放入 h3 标签(设计原因)，然后让 iamge 与下面的 div 重叠。通常，我会使用 margin-bottom: -30px;将图像向下移动。但是这次没有用。 我想当我尝试重叠包含带有背景的 div 的 boots-trap-column 时，它不起作用(图像“隐藏”在带有背景的 div 后面)。只给 .col-xs-8 一个 z-index: -1;有效(但给 z-index: 9999；图像没有)。

有人可以向我解释一下为什么吗？或者是否有任何我不知道的 Bootstrap 基础知识？

感谢任何帮助或输入。谢谢! :)

这是我正在处理的元素代码 (HTML):

<div>
    <h3>
        <img src="assets/test.png" class="test-img">
    </h3>
</div>
<div class="row">
    <div class="col-xs-8">
        <div class="wrapper">
            A lot of text! A lot of text! A lot of text! A lot of text! A lot of text! A lot of text! A lot of text! A lot of text! A lot of text! A lot of text! A lot of text! A lot of text!
        </div>
    </div>
</div>

CSS 代码:

.wrapper {
background: url(/assets/back.png);
width: 250px;
}

.col-xs-8 {
//z-index: -1;
}

.test-img {
//margin-bottom: -30px;
}

Answer 1

添加类“position:relative;”到图像，因为 z-index 仅适用于定位元素。