position: absolute를 사용한 콘텐츠가 반응형에 대응 하는 방법

원인

어떤 콘텐츠에 absolute를 사용하고 뷰 포트의 너비가 줄어들때 absolute를 사용한 콘텐츠가 비율대로 같이 줄어들기를 원했는데 레이아웃에서 벗어나는 문제 발생

 

 

해결

방법1

absolute 사용후

margin-left : - 해당 콘텐츠 가로의 1/2px,

margin-top : - 해당 콘텐츠의 세로의 1/2px

 

ex)콘텐츠의 가로가 96이므로 1/2인 -48px 적용 , 원하는 위치로 position 설정  - (top 50% left 50%)를 적용후  margin-top: -48px, margin-left: -48px를 적용했다. 

 

방법2

 transform: translate(-48px, -48px); 

 

 

margin 값은 음수로 적용해야 한다. 앞에 - 붙이는걸 잊지말자.

또한 margin 부터 적용하고 position 의 위치를 조정하는게 좋다.