[CSS]요소의 배치 방법 지정하기: position 속성
[position 속성과 같이 사용하는 css 속성들]
position 속성은 요소의 위치를 지정하는 기준을 지정하는 속성입니다.
| 속성 값 | 설명 |
| static | 기본 값, 기준 없음 |
| relative | 요소 자신을 기준 |
| absolute | 위치 상 부모 요소를 기준 |
| fixed | 뷰포트를 기준 |
position 속성과 같이 사용하는 css 속성들은 다음과 같습니다.
| 속성 | 설명 |
| top, bottom, left, right | 요소의 각 방향별 거리 지정 |
| z-index | 요소의 쌓임 정도를 지정 |
[relative 속성 값]
relative 속성 값은 요소 자신을 기준으로 배치합니다.
position: relative; 만을 적용하면 배치 전과 동일하지만,
top, bottom, left, right 속성과 함께 사용하면 배치 전 자리는 비어 있고 해당 방향 거리만큼의 위치가 다시 지정됩니다.
위 박스에서 2번 박스의 position을 relative로 지정하여 top: 50px; left: 50px;을 각각 지정하겠습니다.
배치 전 위치에서 위에서 50px, 왼쪽에서 50px 만큼 떨어진 거리에 요소가 재배치 된 것을 확인할 수 있습니다.
이때 1번과 3번 박스의 위치는 바뀌지 않고 그대로입니다!
[absolute 속성 값]
absolute 속성 값은 위치 상 부모 요소를 기준으로 배치합니다.
position: absolute;인 요소는 붕~ 뜨면서 다른 요소와 겹치게 되어 주변과의 상호작용이 무너지게 됩니다.
2번 박스에 position: absolute;를 지정하겠습니다.
화면 상으로는 3번 박스가 보이지 않네요! 이는 2번 박스가 1번, 3번 박스보다 붕~ 떠있기 때문에 2번 박스 아래에 3번 박스가 위치해 있는 것입니다.
이제 이 2번 박스에 top: 50px; left: 50px;를 지정하겠습니다.
1, 2, 3번 박스의 부모 요소는 모두 파란색 박스입니다. 분명 absolute는 부모 요소를 기준으로 배치하는 속성 값인데, 2번 박스는 뷰포트를 기준으로 위 50px 왼쪽 50px 거리만큼 떨어져있습니다.
이 이유는 부모 요소에 position: relative;를 지정하지 않았기 때문입니다.
absolute인 요소는 부모 요소, 조상 요소, .. 를 차례대로 검사하여 기준을 찾고 기준에 부합하는 상위 요소가 없다면 자동으로 뷰포트를 부모 요소로 인식하게 됩니다.
때문에, position: absolute인 요소의 배치 기준을 지정할 때는 부모 요소에 position: relative를 지정해야합니다.
그렇다면 파란색 박스에 position: relative를 추가하겠습니다.
[fixed 속성 값]
fixed 속성값은 뷰포트를 기준으로 배치하여 스크롤을 내려도 항상 그 위치에 고정되어 있습니다.
이 속성값을 가진 요소 또한 주변 요소와 상호작용을 하지 않습니다.
이때 부모 요소에 relative가 되어 있어도 무시하고 뷰포트를 기준으로 배치합니다.
2번 박스의 position: fixed; top: 50px; right: 50px;를 지정하겠습니다.
[요소의 display 자동 변경]
position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 자동으로 block으로 변경됩니다.
[z-index 속성]
z-index 속성은 요소의 쌓임 정도를 지정하는 속성입니다.
| 속성 값 | 설명 |
| auto | 기본값, 부모 요소와 동일한 쌓임 정도 |
| 숫자 | 숫자가 높을수록 위에 쌓임 |
[요소의 쌓임 순서 stack order]
어떤 요소가 사용자와 더 가깝게 있는지 결정하는 순서는 다음과 같은 규칙을 따릅니다.
1. 요소에 position 속성의 값이 있는 경우, 위에 쌓임 (기본값 static 제외)
2. 1번 조건이 같을 경우, z-indx 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1번과 2번 조건까지 같을 경우, html의 다음 구조일 수록 위에 쌓임