HTML/CSS - Position (relative&absolute)

1. Position

- 웹 사이트를 만들 때, 여러가지 요소를 사용한다. 이 요소들을 조금씩 개발자가 원하는 위치에 배치하기 위해서 사용하는 속성중 하나가 position이라는 속성이다. 사용할 기본 구조는 아래 사진과 같다. 

 

 

1) position: fixed;

 

- fixed속성값을 사용하면 스크롤을 내려도 요소의 위치가 고정되어있게 된다. 

 

- fixed 속성값을 이용하기 위해서는 알아야 할 중요한 것이 있다. 바로, layer가 달라지는다는 것이다. 

 

예시) 두개의 div태그가 있다. 1번 태그는 일반적인 div이고 2번 태그는 fixed 속성값을 적용한 태그이다. 그러므로 스크롤을 움직이면 1번 div는 제자리에 있고 2번 div는 고정된 자리에 그대로 위치한다. 하지만, 2번 div는 1번div의 공간을 넘어서서 움직일 수 없다. 만약 두 div를 겹치게 하고 싶다면 어떻게 해야할까?

2번 div에 fixed 속성만 적용한 상태 

 

 

 

- 2번 div의 top, left, bottom 속성 중 하나라도 고치게 되면 두 div는 겹치게 된다. 다시 말해, 2번 div가 1번 div보다 앞에 존재하는 layer가 생긴다는 것이다. (아래 사진참고)

 

 

 

[결론]

- fixed 속성이 적용된 엘리먼트는 적용되지 않은 다른 엘리먼트보다 상위의 layer에 생성된다.

 

---

2. Relative & Absolute

- position속성의 default값은 static이다. static이라는 말 그대로 설정된 위치에 그대로 놓여진다는 뜻이다. 

 

1) position: relative; 

- relative의 뜻 그대로, 어떤 요소를 다른 요소보다 상대적으로 위치하도록 하는 것이다. 예시를 통해 설명하겠습니다. 

 

[기본코드] 

 

 

예시) 만약 green이라는 클래스 이름을 가진 div를 조금 더 위쪽에 위치하게 하고싶다면 어떻게 해야할까? 

→ 초록색 div의 position을 relative로 설정하고 top을 원하는 만큼 설정하면 된다. (아래 사진참고) 

 

- 즉, 초록색 div의 기존 위치를 기준보다 상대적으로 -20px만큼 위쪽으로 움직였다는 의미이다. 

 

 

 

1) position: absolute; 

- absolute 포지션은 relative 속성을 가진 가장 가까운 부모 엘리먼트를 기준으로 이동한다. 그렇다면 초록색 div의 가장 가까운, relative 속성을 가진 부모엘리먼트는 무엇일까? (아래 사진참고)

 

 

- 초록색 div에 position: absolute; 와 right: 0px; 를 설정했다. 그랬더니 위의 우측 사진처럼, 초록색 div가 화면 가장 오른쪽으로 이동한 것을 알 수 있다. 코드 상으로 보았을 때 어디에도 relative 속성을 가진 엘리먼트는 없다. 왜일까? 

→ 그 이유는 Body 태그의 기본 속성이 position: relative; 이기 때문이다. 다시 말해, body태그를 기준으로 오른쪽에서 0px만큼 떨어진 것이다. 

 

 

예시) 그렇다면 body를 기준으로 하지 않고 베이지색 div를 기준으로 하고싶다면 어떻게 해야할까? 이미 초록색 div는 베이지색 div의 자식 엘리먼트이기 때문에, 부모 엘리먼트인 베이지색 div의 postion을 relative로 설정하면 된다. 위의 사진에서 어떻게 변하는지 알아보자. (아래 사진참고) 

 

 

[결론]

→ position: absolute는 relative 속성값을 갖고있는 부모 엘리먼트를 기준으로 움직인다. relative 속성값을 갖고있는 부모 엘리먼트가 없는 경우에는 body를 기준으로 움직이고, 기준을 다른 부모 엘리먼트로 잡고 싶다면 해당 엘리먼트의 position 속성을 relative로 설정하면 된다.