標頭的背景色未顯示在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。