How to overlay a fixed box over an img (div over div) - html

Question

I have been given positions in the form of an object for a box to be drawn over an image. I have tried to do this using a wrapper div but the box is positioned on the top right of the image and is not fixed to the image.
I want a bounding box to be drawn directly on the image given the position coordinates that resizes with the image. How can I edit the CSS to achieve what I'm looking for?
<div key={index} className="wrapper">
<img src={`images/${item.Img_Name}`} className="App-images" alt="" loading="lazy"/>
<div
style={{
position: "inherit",
top: `${item.Top}px`,
left: `${item.Left}px`,
width: `${item.Width}px`,
height: `${item.Height}px`,
border: "1px solid red",
}} className="Box">
</div>
</div>
</div>
Here is the current CSS file
.Box {
grid-area: 1 / 1;
flex: 0 0 33.33333%;
max-width: 75%;
margin-top: 20px;
}
.App-images {
flex: 0 0 33.33333%;
max-width: 75%;
margin-top: 20px;
grid-area: 1 / 1;
}
.wrapper {
flex: 0 0 33.33333%;
max-width: 75%;
margin-top: 20px;
display: grid;
}

Answer 1

it seems what you're trying to do here is position a div within the confines of another div. For this case, you would use position: relative and position: absolute, with top and left to change the location of the parent. For more details, visit this question. Below is an example in the limited code you copy pasted in from your question, with the HTML being the same:
.Box {
grid-area: 1 / 1;
flex: 0 0 33.33333%;
max-width: 75%;
margin-top: 20px;
position: absolute; /* the position */
top: 10px; /* can also be sent to percents, vw, etc. places position in parent*/
left: 10px; /* can also be sent to percents, vw, etc. places position in parent */
}
.App-images {
flex: 0 0 33.33333%;
max-width: 75%;
margin-top: 20px;
grid-area: 1 / 1;
}
.wrapper {
flex: 0 0 33.33333%;
max-width: 75%;
margin-top: 20px;
display: grid;
position: relative; /* this is for the parent */
}
Here is an easier to understand example:
div.main { /* parent */
border: 2.5px solid black;
background-color: red;
padding: 2.5px;
width: 100px;
height: 100px;
position: relative;
}
img {
width: 80px;
height: 80px;
}
div.apart { /* child */
position: absolute;
background-color: white;
top: 10px;
left: 10px;
}
<div class=main>
<img src="https://picsum.photos/500">
<div class=apart>10px top+left</div>
</div>