<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>

위 처럼 코딩했을때 div에 width와 height를 %로 잡아두고 안에 를 position 위치를 박아둔건데요

span은 고정값으로 박아져있고 div가 윈도우 크기에 따라서 줄었다 커졌다 하면서 span의 위치가 제가 원하는 위치에서 저리갔다 이리왔다 합니다.

윈도우 크기가 줄었다 커졌다 할때 span의 위치도 같이 저리갔다 이리왔다 하게 하는 방법이 있나요?

요약 ) 크기에 따른 position 위치가 저절로 바뀌는 방법이 있나요 ㅠㅠ