CSS에서 position 속성은 요소의 위치 지정 방법을 정의합니다. position 속성의 값에 따라 요소의 위치가 결정됩니다. 이번에는 position 속성과 그 값을 사용하는 방법에 대해 알아보겠습니다.
position 속성
position 속성에는 다음과 같은 값이 있습니다.
- static
- relative
- absolute
- fixed
- sticky
static
static 값은 position 속성의 기본값입니다. 이 값은 요소가 문서 흐름에 따라 배치되는 것을 의미합니다. top, bottom, left, right, z-index 속성이 동작하지 않습니다.
position: static;
relative
relative 값은 요소를 문서 흐름에 따라 배치한 다음, 요소 자신의 위치를 상대적으로 이동시킵니다. top, bottom, left, right 속성을 사용하여 위치를 지정할 수 있습니다.
position: relative;
top: 10px;
left: 20px;
absolute
absolute 값은 요소를 문서 흐름에서 제거하고, 요소의 부모 요소 중 가장 가까운 위치 지정된(=position 속성이 relative, absolute, fixed, sticky인) 요소를 기준으로 배치합니다. top, bottom, left, right 속성을 사용하여 위치를 지정할 수 있습니다.
position: absolute;
top: 10px;
left: 20px;fixed
fixed 값은 요소를 문서 흐름에서 제거하고, 뷰포트를 기준으로 배치합니다. 스크롤에 따라 요소의 위치가 바뀌지 않습니다. top, bottom, left, right 속성을 사용하여 위치를 지정할 수 있습니다.
position: fixed;
top: 10px;
left: 20px;sticky
sticky 값은 요소를 문서 흐름에 따라 배치하다가, 스크롤 위치가 요소의 위치에 닿을 때 해당 요소를 고정합니다. top, bottom, left, right 속성을 사용하여 위치를 지정할 수 있습니다.
position: sticky;
top: 10px;z-index 속성
z-index 속성은 요소의 쌓임 순서를 정의합니다. 쌓임 순서는 position 속성의 값이 relative, absolute, fixed, sticky일 때만 적용됩니다. z-index 속성의 값이 클수록 위에 위치하게 됩니다.
position: absolute;
z-index: 1;위의 예제에서 z-index 속성이 1인 요소는 다른 요소보다 위에 위치하게 됩니다.
이제 position 속성과 z-index 속성을 사용하여 요소의 위치를 조절하는 방법을 알아보았습니다. 이를 활용하여 웹페이지를 더욱 다양하게 꾸밀 수 있습니다.
알기 쉽게 설명해주는 유튜브 참고 동영상
댓글