如何实现图片覆盖区块背景色但不覆盖文本内容？

嘿，我懂你要的效果了——图片左移覆盖红色区块的背景，但红色块里的文字得完完整整露在上面，不能被图片挡住对吧？这问题其实就是个堆叠层级的小调整，咱们改几行CSS就能搞定！

为啥原来的代码会遮文字？ #

现在图片靠margin-left: -120px左移后，和红色区块里的文本处于同一个“堆叠层级”，默认情况下图片会压在文字上面。咱们只要给文字提一提层级，就能让它跑到图片上头啦。

修改后的完整代码 #

CSS 部分 #

.coloredBlock { 
  background-color: red; 
  color: white; 
  text-align: right;
  position: relative; /* 给父容器加定位，让子元素的层级设置生效 */
}
.coloredBlock h1 {
  position: relative; /* 文字必须加定位，z-index才起作用 */
  z-index: 1; /* 把文字的层级调高，比图片默认层级高就行 */
}
.imageBlock img { 
  margin-left: -120px; 
}

HTML 部分（不用改结构） #

<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>

简单说下原理 #

1. 给.coloredBlock加position: relative，是为了给里面的文字创建一个独立的“层级容器”；
2. 给h1加position: relative和z-index: 1，相当于给文字开了个“置顶权限”，这样图片就只能覆盖红色背景，碰不到文字啦。

要是你用的是Bootstrap栅格，这个改动完全兼容现有布局，不用动HTML结构哦～

内容的提问来源于stack exchange，提问作者S.Simkhada