Position text in a CSS grid over an image

Question

I have a CSS grid where I need to place some text over an image. Below is shown the code I use without text over the image.

.sbp-item12 {
        grid-row: 6 / 7;
        grid-column: 9/13;
        height: 250px;
    }

<div class="sbp-item12">
    <a href="#">
       <h3>Here is a headline</h3>
       <figure>
          <img src="https://placehold.it/380x250">
       </figure>
    </a>
 </div>

I tried to add the following to the code, but then the text is going in the bottom of my page, and is not staying inside the grid item. Does anybody have an idea how I can place text over the image in my grid item?

.sbp-item12 {
    grid-row: 6 / 7;
    grid-column: 9/13;
    height: 250px;
}

.bottom-left {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 0;
    right: 0;
    bottom: 0;
}

<div class="sbp-item12">
    <a href="#">
        <div class="text-bottm-left">
            <h3>Here is a headline</h3>
        </div>
        <figure>
            <img src="https://placehold.it/380x250">
        </figure>
    </a>
</div>

Answer 1

You need to set parent position:relative and set the position:absolute for the div which you want to place at bottom-left.
Note: Your Html and css classes doesn't match. You need to correct them. Below is the working snippet

.sbp-item12 {
  grid-row: 6 / 7;
  grid-column: 9/13;
  height: 250px;
}

figure {
  margin: 0;
  position: relative
}

.bottom-left h3{
  z-index: 100;
  position: absolute;
  color: black;
  font-size: 24px;
  font-weight: bold;
  left: 0;
  bottom: 0;
  margin:0
}

<div class="sbp-item12">
  <a href="#">
    <figure>
      <img src="https://placehold.it/380x250">
      <div class="bottom-left">
        <h3>Here is a headline</h3>
      </div>
    </figure>
  </a>
</div>