Can I move it according to the size of the CSS position window?

<div style="border: 1px solid #cccccc; width: 98%; height: 80%; margin: 10px;">
<div style="position: relative; border: 1px solid red; width: 50%; height: 50%; margin: 0 auto;">
            <img src="http://placehold.it/100x70" style="border: 1px solid blue; display: block; width: 100%; height: auto;">
            <span id="p1" class="green" style="position: absolute; bottom: 110px; left: 200px;">1</span>
        </div>
    </div>

When coding like above, I set the width and height at % in the division and put the position inside.

The span is fixed and the div has decreased with the window size It's getting bigger, and the position of the span comes back and forth from the position I want.

The window size has decreased Is there a way to make the span go back and forth when it gets bigger?

Summary) Is there a way to change the position according to the size by itself? ㅠ