[CSS] position: absolute 사용법

seungyeon·2021년 5월 18일
0

CSS

목록 보기
1/1
post-thumbnail

이미지 상단 가장자리에 삭제버튼을 위치시킨다거나 하단에 게시자의 정보를 넣는 등 엘리먼트의 절대적인 위치를 설정해주고 싶은 상황은 스타일링 과정에서 반드시 만나게 된다.

그동안 position: absolute 를 사용하면 원래 위치와 상관없이 위치를 지정할 수 있으며 가장 가까운 상위 요소를 기준으로 위치가 결정된다고 알고 있었다.
그런데 이상하게 실제로 사용하면 가장 가까운 상위요소가 아닌 body를 기준으로 배치가 되어서 결국 원하는대로 위치 잡기가 쉽지 않았는데, 이번 프로젝트 atomic component들을 구현하다가 그 이유를 알게되어서 혹시라도 까먹을까봐 기록하러 달려왔다.

이유는 한가지 정보가 빠져있었기 때문이다. 빠진 정보를 채워넣어 position: absolute 속성을 다시 정의하면 아래와 같다.

position: absolute 를 사용하면 원래 위치와 상관없이 위치를 지정할 수 있으며, positon: relative 속성을 가지는 가장 가까운 상위 요소를 기준으로 위치가 결정된다

(오랜만에 블로그 글이라서 이대로 끝내기는 아쉽지만.. 시간이 없는 관계로)
-끝-

0개의 댓글