CSS 포지션(position) | 데이터카페

CSS 포지션
-  요소의 위치를 조정하기 위해 포지션(position) 속성을 사용할 수 있습니다. 포지션 속성은 static, relative, absolute, fixed, sticky 다섯 가지 값으로 설정할 수 있습니다.

속성요약
- static : 기본값입니다. 요소는 레이아웃의 기본 순서에 따라 배치됩니다.
- relative : 요소의 원래 위치를 기준으로 상대적으로 위치를 지정합니다.
- absolute : 요소의 위치를 가장 가까운 position 속성이 static이 아닌 부모 요소를 기준으로 지정합니다.
- fixed : 요소의 위치를 브라우저 뷰포트를 기준으로 지정합니다.
- sticky : 요소의 위치를 스크롤에 따라 상대적으로 지정합니다.

static
기본값으로, 요소가 문서의 일반적인 흐름에 따라 배치됩니다. top, right, bottom, left 속성이 적용되지 않습니다.
css
div { position: static; }


relative
- position 속성을 relative로 설정하면 요소의 원래 위치를 기준으로 상대적으로 위치를 지정할 수 있습니다. top, bottom, left, right 속성을 사용하여 요소의 위치를 지정합니다.
css
div {
     position: relative;
     top: 20px;
     left: 10px;
}


absolute
- position 속성을 absolute로 설정하면 요소의 위치를 가장 가까운 position 속성이 static이 아닌 부모 요소를 기준으로 지정합니다. top, bottom, left, right 속성을 사용하여 요소의 위치를 지정합니다. absolute 위치 요소는 부모 요소의 레이아웃에 영향을 미치지 않습니다. 즉, 부모 요소의 너비와 높이가 absolute 위치 요소에 의해 결정되지 않습니다.
css
div {
     position: absolute;
     top: 50px;
     left: 30px;
}


fixed
- position 속성을 fixed로 설정하면 요소의 위치를 브라우저 뷰포트를 기준으로 지정합니다. 즉, 스크롤을 하더라도 요소의 위치는 고정됩니다. top, bottom, left, right 속성을 사용하여 요소의 위치를 지정합니다. fixed 위치 요소는 부모 요소의 레이아웃에 영향을 미치지 않습니다. 즉, 부모 요소의 너비와 높이가 fixed 위치 요소에 의해 결정되지 않습니다.
css
div {
     position: fixed;
     top: 20px;
     right: 30px;
}


sticky
- position 속성을 sticky로 설정하면 요소의 위치를 스크롤에 따라 상대적으로 지정합니다. 즉, 스크롤이 시작될 때는 요소의 위치가 static 위치로 설정되며, 스크롤이 계속되면 요소의 위치가 fixed 위치로 설정됩니다. top, bottom, left, right 속성을 사용하여 요소의 위치를 지정합니다. sticky 위치 요소는 부모 요소의 레이아웃에 영향을 미치지 않습니다. 즉, 부모 요소의 너비와 높이가 sticky 위치 요소에 의해 결정되지 않습니다
css
div {
     position: sticky;
     top: 10px;
     z-index: 1;
}