将图像重叠在彩色div上

Question

我尝试创建一个如右图所示的布局，但是我无法将图像重叠在右侧的红色栏中。请在我使用引导程序的css中如何执行此操作。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
  <div style="background-color:#2c2c34;" class="row">
    <div class="col-md-10">
      <aside class="graybar-text">
        <h1 style="font-size:60px">
          The possibilities <br> with SAMTL are <br> endless
        </h1>
        <p style="font-size:20px">
          our essences comprises of a first class Asset<br> Management services, Trusteeship and Property<br> development.
        </p>
        <img style="padding-top:160px;width:100%; z-index: -1;" src="https://via.placeholder.com/500x250">
      </aside>
    </div>
    <div style="padding-top:350px;" class="col-md-2">
      <aside class="redbar">
        <div style="padding-left:110px;" class="btn-group-vertical">
          <ion-icon name="radio-button-off"></ion-icon>
          <ion-icon name="radio-button-off"></ion-icon>
          <ion-icon name="radio-button-off"></ion-icon>
          <ion-icon name="radio-button-off"></ion-icon>
        </div>
      </aside>
    </div>
  </div>
</div>