Question

经过一段时间，我能够解决一个困扰我的问题。我希望有人能解释我的解决方案，因为我不明白它为什么会起作用，而且我通常这样做的方式不是这次。

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

有人可以向我解释原因吗？或者是否有任何我不知道的引导基础知识？

感谢任何帮助或输入。谢谢！：）

以下是我正在处理的项目代码（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只适用于定位元素。

html中的图像可以不与引导列重叠吗？

1 个答案: