position 위치 지정

개념 이해하기

relative는 원래 자리를 유지하며 absolute 자식의 기준이 될 수 있습니다. absolute는 일반 흐름에서 빠지고 fixed는 viewport, sticky는 스크롤 컨테이너의 임계 위치를 기준으로 붙습니다.

position: relative를 준 .stage가 기준이 되어 첫 상자는 오른쪽 위에서 12px씩 떨어져 놓입니다. 두 번째 상자는 class에 target도 있어 같은 top과 right를 물려받으므로, .second가 그 둘을 auto로 되돌린 뒤 left와 bottom을 12px로 정해 왼쪽 아래 모서리에 붙습니다. auto로 되돌리지 않으면 네 방향이 모두 정해져 상자가 .stage를 거의 덮도록 늘어납니다.

절대 위치의 기준은 position이 static이 아닌 가장 가까운 조상이지만, transform이나 filter가 걸린 조상도 기준 상자를 만듭니다. 그래서 그런 조상 안에 놓인 fixed 요소는 viewport가 아니라 그 조상을 기준으로 붙어 스크롤하면 함께 움직입니다.