Sticking/layering an image to top-left corner of div container

Question

Been attempting to layer and image over the top left corner of a div container; iv achieved it once but it didn't stick to position if the page was adjusted!

^^ This is what im redesigning

^^ This is what ive managed to design myself

I have come across different posts and answers suggesting that I try to use:

display: block, relative position: block, relative margins, float: start

In the end I am stumped an have resorted to removing most displays besides for the p tags an its composed container: This is the CSS I have been trying to use to make this happen

.roadmap__section__container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  background-color: #383636;
  align-items: center;
}

.roadmap__header {
  font: 3rem "Nunito";
  margin: 3% 50% 3% 50%;
}

.roadmap__phase__one {
  width: 100%;
  height: 100%;
}
.phase__one__img {
  width: 10%;
  position: absolute;
  margin-left:10%;

}
 .phase__one__data {
   display: flex;
   flex-direction: column;
   width: fit-content;
   height: fit-content;
   align-items: flex-start;
   justify-content: center;
   text-align: center;
   padding: 25px;
   margin: 0% 5% 5% 15%;

   box-shadow: 1px 1px 40px #ff00e6;
   outline-color: #ff00e6;
   outline-offset: 0px;
   outline-style: solid;
   outline-width: 3px;
   border-radius: 25px;
}
.phase__one__data p {
  font-size: 1.75rem;
  color: #fff;
  font-family: "Nunito", serif;
  padding: 5px 10px;
}

Here is the HTML Code used for my redesign:

<section class="roadmap__section__container">
    <h1 class="roadmap__header">Roadmap</h1>
    <div class="roadmap__phase__one">
        <img class="phase__one__img" src="images/CasinoWRLD__dice1" alt="">

        <div class="phase__one__data">
            <p>- Working To Perfect The NFT Artwork.</p>
            <p>- Finalise The Marketing Plan.</p>
            <p>- Plan And Develop Casino WRLD.</p>
        </div>


    </div>

</section>

Answer 1

.phase__one__img {
  grid-column: 3;
  width: 11%;
  position: absolute;
  top: 157.5%;
  right: 32%;
}
.phase__zero__img {
  grid-column: 1;
  width: 11%;
  position: absolute;
  margin-left: 5%;
  top: 119.75%;
}

I've found this to work currently but it is not a 100% answer, if the browser height is adjust the settings regarding ''top:157.5%'' needs to be adjusted accordingly or it will not line up with the top-left corner of the div container

The difference in the two is pertaining to it switches back and forth going down the page