CSS: Position 정리 (Static, relative, absolute, sticky, fixed)

-top bottom left right 값을 지정해줘도 영향을 받지 않는다.

-HTML에서 표기된 순서대로, 들어있는 순서대로에 맞게 포지션이 결정

-원래있던 공간(예를들면, 자신이 속해있는 parent box안) 유지하면서 위치 이동.

-기존의 자리에서 top bottom left right의 값에 영향을 받는다.

-원래있던 자리(속해있는 박스 안에서 위치 이동하지 않고) static이 아닌 parent를 찾아 거기서 이동한다.

(예를들면, body로 부터 이동됨)

*부모의 사이즈에 따라 사이즈가 변동된다. (width,height에 %를 썼을 때)

-있던 자리를 유지하면서(parent 요소 안에서) 안보이게 되면 그 위치 그대로 스크롤을 따라 이동함.(top left같은 값을 지정해 줘야함)

-원래 있던 자리(view point)를 나와서 부모와 상관없이 포지션됨. (스크롤을 따라 이동함)

파란색 박스를 fixed로 지정하면 스크롤을 따라 이동한다.

*참고 자료

Layout and the containing block

In this article, we examine the factors that determine an element's containing block.

developer.mozilla.org

남주는 IT블로그