重叠背景颜色与图像，但不是内容

Question

请参阅下面的JS小提琴，希望这是有道理的。目前我在图像上添加了一个负边距，图像位于整个div（红色框）之上，我想要的是图像在红色背景颜色之上而不是内容（文本）。

＆＃13;

＆＃13;

.coloredBlock {
  background-color: red;
  color: white;
  text-align: right;
}

.imageBlock img {
  margin-left: -120px;
}

＆＃13;

<div class="container">
  <div class="col-md-6 coloredBlock">
    <h1>This is a text</h1>
  </div>
  <div class="col-md-6 imageBlock">
    <img src="https://www.w3schools.com/w3css/img_fjords.jpg" alt="">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

刚刚将其添加到代码中，以便继续执行所有操作：

.coloredBlock h1{
  position: relative;
  z-index: 100;
}

https://jsfiddle.net/mwtxazrr/