CSS position 윈도우 크기에 따라서 같이 이동시킬수 있나요?


<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 위치가 저절로 바뀌는 방법이 있나요 ㅠㅠ

  • 2017년 12월 19일에 작성됨

조회수 91


1 답변


span의 bottom과 left값을 %단위로 해보세요 부모인 div(relative 적용된거)에따라 비율에 맞게 조절됩니다.


로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close