css

position의 속성들과 특징

인재재 2024. 5. 27. 17:13

position 속성

HTML 문서 상에서  글의 흐름에서 벗어나서 요소를 자유롭게 배치할 때 사용되는 속성으로,

많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용되며 4면의 값이 같은 경우 inset으로 통일해서도 사용합니다.

 

이러한 속성을 이용한다면 다양한 요소들을 자유롭게 배치할 수 있고, 레이아웃을 세밀하게 제어할 수 있게되며, 다양한 디자인 효과를 구현할 수 있습니다.

 

position: static

position의 기본 값으로 static이고, static인 경우 원래 있어야 할 위치에 배치됩니다.

HTML에 작성된 순서 그대로 브라우저 화면에 표시가 되기 때문에 top, left, bottom, right 속성값은 position 속성이 static일 때 무시됩니다.

 

position: relative

요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 즉, 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해는 것입니다.

요소의 위치 지정은 top, bottom, left, right 속성을 이용하며 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있습니다.

 

 

position: absolute

absolute 속성값은 relative 속성값과 함께 사용되는 경우가 많습니다.

position 속성이 absolute일 때 해당 요소의 배치 기준이 자신이 아닌 상위 요소에서 찾게 됩니다.

DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정되는데,

만약 해당 요소 상위에position속성이static이 아닌 요소가 없다면?

DOM 트리 최상위에 있는<body>요소가 배치 기준이 됩니다.

 

position: fixed

요소를 항상 고정된(fixed) 위치에 배치할 수 있도록 합니다.

페이지를 살피다가 화면을 위아래 스크롤할 때 화면 특정 부분이 고정되어 움직이지 않는 영역들은 이 fixed 속성을 사용합니다.

fixed 속성값은 배치 기준을 자신, 부모 요소가 아닌 브라우저 전체화면(viewport)로 잡습니다.

마찬가지로 top, left, bottom, right 속성으로 각각 브라우저 상하좌우로 부터 해당 요소가 얼마나 떨어져있는지 결정합니다.

 

 

position: sticky

브라우저 화면을 스크롤링할 때 효과가 나타나는 속성입니다.

static처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치됩니다. 기본적으로는 static처럼 배치되기 때문에 요소의 원래 자리를 차지합니다.

 

Z-index

z-index 속성은 여러 요소들이 겹치는 경우, 어떤 요소가 다른 요소 위에 배치될지를 지정합니다. z-index 값은 정수로 지정되며, 값이 큰 요소가 위에 배치됩니다. 단위가 따로 있지 않으며 어떤 요소들이 위에 배치될지의 순서를 정하는 작업이라 생각하면 쉽게 접근할 수 있을 것 같습니다.

 z-index는 position 속성이 적용된 요소에서만 작동합니다.