mdn의 position 문서를 바탕으로, 헷갈리기 쉬운
static
,relative
,absolute
를 비유를 통해 이해해 봅시다.
position
은 중요하고 자주 쓰이는 프로퍼티임.
but, 기억해야하는 포인트가 많아서 나는 많이 헷갈렸음.
그래도 자주 써먹다 보니 나름 머릿 속에서 정리가 되었는데 내가 정리할 때 써먹은 방법(비유)을 공유해보려고 함.
mdn의 설명에 첨언을 한 번 해보겠슴다.
여기는 한 RPG 게임입니다.
각 element는 플레이어로, position
의 value는 플레이어의 성향으로 비유합니다.
top
(en-US), right
(en-US), bottom
(en-US), left
(en-US), z-index
속성이 아무런 영향도 주지 않습니다.요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top
, right
, bottom
, left
의 값에 따라 오프셋을 적용합니다.
오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static
일 때와 같습니다.
z-index
의 값이 auto
가 아니라면 새로운 쌓임 맥락을 생성합니다.
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top
, right
, bottom
, left
값이 지정합니다.
z-index
의 값이 auto
가 아니라면 새로운 쌓임 맥락을 생성합니다. 절대 위치 지정 요소의 바깥 여백은 서로 상쇄되지 않습니다.
<html>
을 기준으로)기존에 아는 개념을 빌려와 이해하면 생전 처음 보는 개념을 0에서 100까지 하나씩 외우는 것보다 빠르고 오래 기억할 수 있다고 생각하는데요.
이 말도 안되는 방법은 100% 저를 위해서, 제가 만든 이해방식입니다.
그래도 도움이 되는 분이 계신다면 좋겠습니다.