Position
position 속성을 사용하면 웹 문서에서 요소의 위치를 자유롭게 정할 수 있다. position 속성은 자주 사용하지만 그만큼 실수하기 쉬운 부분이니 꼼꼼히 살펴보자.
요소의 위치를 정하는 left, right, top, bottom 속성
position 속성보다 먼저 알아두어야할 속성이 있다. 웹 문서에서 요소를 원하는 곳에 갖다 놓으려면 위치를 지정할 수 있어야 하는데, 이때 사용하는 속성이 left, right, top, bottom이다. position 속성으로 기준 위치를 정한 뒤 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정하면 된다.
| 속성 종류 | 설명 |
| left | 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정해준다. |
| right | 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정해준다. |
| top | 기준 위치와 요소 사이에 상단쪽으로 얼마나 떨어져 있는지 지정해준다. |
| bottom | 기준 위치와 요소 사이에 하단쪽으로 얼마나 떨어져 있는지 지정해준다. |
배치 방법을 지정하는 position 속성
position 속성은 웹 문서 안의 요소를 자유자재로 배치해 주므로 HTML과 CSS를 이용해 웹 문서를 만들 때 매우 중요하다. position 속성에서 사용하는 속성 값의 특성을 잘 이해해보자.
- static(기본값): position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다. 문서의 흐름에 맞춰 배치되는데 즉, HTML 작성된 순서 그대로 브라우저 화면에 배치된다.
- relative: 요소의 원래 위치를 기준으로 위치를 지정해 배치된다.
기준 위치를 지정할 수 있다는 점을 제외하면 static과 같고, 요소의 원래 자리는 그대로 차지한다. - absolute: position 속성이 relative로 설정된 사용한 가장 가까운 상위(부모/조상) 요소를 기준으로 위치를 지정해 배치된다.
글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다. - fixed: 브라우저 창을 기준으로 위치를 지정해 배치된다.
글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다. - sticky: static처럼 원래 위치에 배치되어 있다가 정해진 위치에 브라우저가 스크롤 되면 그때부터 fixed 처럼 고정되어 배치된다.
기본적으로 static처럼 배치되기 때문에 요소의 원래 자리를 차지한다.
각 속성값의 특성을 자세히 살펴보자.
position: static
position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치된다.
이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, top, left, bottom, right 속성값은 position 속성이 static일 때는 무시된다.
See the Pen css_position:static by 주소희 (Jyophie) (@-Jyophie) on CodePen.
position: relative
position 속성을 relative로 설정하면 요소를 원래 위치에서 벗어나게 배치할 수 있다. 요소를 원래 위치를 기준으로 상대적으로 배치해준다고 생각하면 된다. 요소가 원래 위치에 있을 때의 상하좌우로부터 얼마나 떨어지게 할지 지정할 수 있다.
예를 들어 두 번째 <div> 요소의 position 속성을 relative로 변경하고 요소의 원래 위치로부터 위에서 30px 왼쪽에서 50px 떨어지게 설정해보자.
See the Pen css_position:relative by 주소희 (Jyophie) (@-Jyophie) on CodePen.
position: absolute
position 속성이 absolute이면 해당 요소는 배치 기준을 자신이 아닌 상위(부모/조상)에서 찾는다. position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정되는데, 해당 요소의 부모에 position: static이 아닌 요소가 없을 경우, 계속 찾아서 조상 요소로 넘어가서 기준을 찾는다. 계속 못찾을 경우 DOM 트리의 최상위에 있는 <body> 요소가 배치 기준이 된다.
대부분의 경우, 가장 가까운 상위 요소(부모 요소)를 기준으로 위치를 지정하는 경우가 많다. 어떤 요소의 display 속성을 absolute로 정할 경우, 부모 요소의 display 속성을 relative로 지정하는 것이 관례라고 한다.
예제에서 두번째 <div> 요소의 부모인 <main> 요소의 position 속성을 relative로 변경해보자.
See the Pen css_position:absolute by 주소희 (Jyophie) (@-Jyophie) on CodePen.
두 번째 요소는 상위(부모) 요소인 <main> 요소를 기준으로 배치되었다. position: absolute 요소는 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않는다. 즉, 기존 위치에서 빠져나온 것. 그러므로 첫 번째 요소 다음 바로 글의 흐름에 따라 세 번째 요소가 배치되었다.
position: fixed
position 속성을 fixed로 지정하면, 요소를 항상 고정된 위치에 배치할 수 있다. fixed의 배치 기준이 브라우저 전체 화면이기 때문에 브라우저를 기준으로 top, left, bottom, right으로부터 얼마나 떨어져있는지를 결정한다.
두 번째 <div> 요소의 position 속성을 absolute로 변경하고, 브라우저 기준으로 상단에서 20px, 우측에서 20px 떨어지도록 설정해보자.
See the Pen css_position:fixed by 주소희 (Jyophie) (@-Jyophie) on CodePen.
position: fixed인 요소도 position: absolute인 요소와 마찬가지로 HTML 문서상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용 하지 않는다.
position: sticky
position 속성을 sticky값은 비교적 CSS에 최근 추가된 속성값이다. 브라우저 화면을 스크롤할 때 효과가 나타난다. <div> 요소의 부모인 <main> 요소의 높이를 줄이고 스크롤 가능하도록 height와 overflow 속성을 조정해준다. 두 번째 <div> 요소의 position 속성을 sticky로 변경하고 top 속성을 0으로 설정해주겠다.
See the Pen css_position:sticky by 주소희 (Jyophie) (@-Jyophie) on CodePen.
스크롤바를 아래로 내려서 화면을 위로 올려보면, 두 번째 요소가 화면 상단에 잘 붙어서 움직이지 않는 것을 확인할 수 있다. 반면, position: static인 세 번째 요소는 이에 구애받지 않고 화면에 따라 올라가는 것을 알 수 있다. position: sticky인 요소도 position: relative인 요소, position: static인 요소와 마찬가지로 원래 자리는 그대로 차지하여 배치된다.
참고 자료: position(MDN)
position - CSS: Cascading Style Sheets | MDN
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.
developer.mozilla.org
'CSS' 카테고리의 다른 글
| CSS-in-JS의 장단점 (0) | 2023.11.04 |
|---|---|
| [CSS] Cascading이란? (0) | 2023.09.09 |
