我如何将此文本放入图像中？

Question

我很难将此文本块放入图像中，我想将文本放在黑色箭头所在的位置，我该怎么做，我将不胜感激，谢谢。

.bloco {
  padding-top: 10%;
}

.title {
  font-family: 'Sans', sans-serif !important;
  font-size: 50px !important;
  font-weight: 900 !important;
}

.container-fluid {
  width: 30% !important;
}

<div class="container">

  <div class="bloco">
    <center>
      <h1 class="title">404</h1>
      <img class="img-fluid" src="https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif" />
      <h3 style="postion : relative; top: 10%;">Estás Perdido?</h3>
      <p>Esta página não existe</p>
      <button class="btn-entrar container-fluid" onclick="window.location.href='{{ url()->previous() }}'">Voltar</button>
    </center>
  </div>

</div>

Answer 1

这样试试

h3{
    position: absolute;
    top: -10%;
}

Answer 2

   <div class="container">
      <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
      <div class="bottom-left">Bottom Left</div>
      <div class="top-left">Top Left</div>
      <div class="top-right">Top Right</div>
      <div class="bottom-right">Bottom Right</div>
      <div class="centered">Centered</div>
    </div>
    
    /* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}