[CSS] position : relative, absolute, sticky, fixed : 네이버 블로그

 

예시는 여기서.

position

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

developer.mozilla.org

position의 default(기본값)은 static이다.

​

● position: relative

원래 있던 자리를 유지하되, 상대적으로 사용자가 지정한 포지션(top, right, bottom, left) 만큼 이동한다.

​

● position: absolute

근접한 부모 중에 static이 아닌 부모의 기준에서 움직인다.

​

● position: sticky

부모 영향을 받으며, 그 자리를 유지한다.

​

● position: fixed

부모 영향을 받지 않는다.

포지션 (top, right, bottom, left)을 지정하면 상대적으로 viewport에서 포지션이 결정이 된다.