[CSS 기본 개념] 포지셔닝/position(relative,absolute,fixed)

1.1  포지셔닝

-positioning, CSS를 이용해서 HTML 엘리먼트들의 위치를 제어하는 방법

 

1) 상대위치(relative positioning)

-position:relative

-자신의 위치를 기준으로 한 상대위치 값을 지정한다.

-자식 엘리먼트의 크기에 따라서 부모 엘리먼트의 크기가 자동으로 변경되지만, 엘리먼트의 위치에 따라서는 변경되지 않는다.

 

2) 절대위치(absolute positioning)

-position:absolute

-문서를 기준으로 위치가 정해지기 때문에 부모 엘리먼트의 위치와는 무관하다.

-엘리먼트의 크기가 부모 엘리먼트의 크기에 반영되지 않는다. 

 

3) 고정위치(fixed positioning)

-position:fixed

-문서를 기준으로 위치가 정해지기 때문에 부모 엘리먼트의 위치와는 무관하다.

-엘리먼트의 크기가 부모 엘리먼트의 크기에 반영되지 않는다.

스크롤의 영향을 받지 않는다.