Hello, I want put Box with and height on the picture _ what is the best solution in Html CSS?

Issue

I want put Box with and height on the picture _ what is the best solution in Html CSS ?

but i dont want use position: absolute , top: 50px for example

i used position: absolute and used position: relative on the img tag ... i think its not easy way ????

Solution

.wrapper {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        z-index: 0;
      }
      .boxWrapper {
        padding: 10px;
      }
      .box {
        display: block;
        position: relative;
        width: 50px;
        height: 50px;
        margin-top: -125px;
        margin-left: 75px;
        background-color: black;
        z-index: 1;
      }

   <div class="wrapper">
      <div class="boxWrapper">
        <img src="https://picsum.photos/200?random=1" alt="" />
        <div class="box"></div>
      </div>
      <div class="boxWrapper">
        <img src="https://picsum.photos/200?random=2" alt="" />
        <div class="box"></div>
      </div>
    </div>

Answered By - Bogdan Djukic