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