css-position

HTML 요소의 위치를 변경할 수 있는 position 에 대해서 학습해 보도록 하겠습니다.

html 요소가 문서의 작성 흐름에 맞추어 배치되는 것이 아니라, 특정한 곳에 강제로 이동되거나, 고정되는 것을 볼 수 있습니다.

이처럼 요소의 위치를 변경하고자 할때에는 position 속성을 사용합니다.

Position

position 속성은 HTML 요소를 배치하는 방법을 지정합니다.

static

static은 요소가 문서의 일반적인 흐름에 맞추어 배치가 되는 것을 말합니다.

static은 top, right, bottom, left 속성이 비활성화 되어 있습니다.

relative

상대적인 의미를 뜻합니다.

relative도 static과 동일하게 문서의 흐름에 맞추어 배치가 됩니다.

위치이동

relative 속성이 부여되어 있는 상태에서 top, right, bottom, left 속성이 추가적으로 부여하여 위치를 변경이 가능합니다. 이때 기준점은 자신의 위치를 기준으로 합니다.

만일, 다른 영역과 겹치에 된다면, 위치를 벗어나서 화면에 출력이 됩니다.

absolute

absolute는 문서의 흐름을 따르지 않습니다. 즉,position이 static이지 않은 부모를 기준으로 움직입니다.

만일 부모의 요소가 relative, absolute, fixed 의 속성을 가지지 않는 경우에는 최상의 body 테그를 기준으로 위치가 결정이 됩니다.

div라도 absolute 속성이 부여되면, 컨덴츠의 영역만의 크기를 같게 됩니다.

### fixed

문서의 흐름을 따르지 않습니다. 스크린의 뷰포트(viewport)을 기준으로 한 위치에 배치가 됩니다.

sticky

static과 같이 일반적인 문서의 흐름을 따라 배치가 되지만, 스크롤의 임계정이 되었을때는, fix와 유사하게 고정할 수 있는 속성입니다.

position:sticky;
top:0px;

sticky는 right, left,bottom 속성은 적용되지 않습니다. top 속성 한개만 사용이 가능합니다.

해더 메뉴등을 구현할때 많이 사용합니다.