标题的背景颜色未显示在img

Question

我的HTML div元素中有一个图像，一个标题将叠加在它上面。标题的背景颜色为宽度的全长。

但是当我向上移动标题以使其覆盖在图片上时，背景颜色消失了。我尝试过z-index，但这似乎不起作用。

<div class="card-body">
  <div class="row">
    <div class="col-6 portfolio-box">
      <img src="assets/images/pexels-photo-450597.jpeg" alt="">
      <h6 class="portfolio-title text-center text-white">Hangman</h6>
    </div>
    <div class="col-6">

    </div>
  </div>                                
</div>

CSS：

img {
   height: 200px;
   width: 100%;
   padding: 0;
}

.portfolio-title {
    background-color: #4aaaa5;
    width: 100% !important;
    padding-top: 10px;
    height: 50px;
    margin-top: -40px;
}

更新后的照片：

Answer 1

body {
  background: grey;
}

.portfolio-box {
  position: relative;
}

img {
  height: 200px;
  width: 100%;
}

.portfolio-title {
  background-color: #4aaaa5;
  width: 100% !important;
  padding-top: 10px;
  height: 50px;
  position: absolute;
  bottom: 0;
  margin: 0;
}

<div class="card-body">
  <div class="row">
    <div class="col-6 portfolio-box">
      <img src="http://www.queness.com/resources/images/png/step1.jpg" alt="">
      <h6 class="portfolio-title text-center text-white">Hangman</h6>
    </div>
    <div class="col-6">

    </div>
  </div>

</div>

编辑2：向容器添加位置，现在可以正常工作，没有z-index。