CSS - Position

CSS를 사용해서 요소의 배치를 옮기는 경우 여러 방법들이 존재한다. 그 중 position 속성에 대해 알아보자!

---

1. position: static

• 모든 요소들은 position: static 값을 기본 값으로 설정하고 있다. 그렇기 때문에 어떠한 position값도 할당되지 않는다.
• static은 따로 쓰지 않아도 된다.

2. position: relative

• 원래 위치를 기준으로 이동시키는 속성이다. 다시 정리하자면, 자기 자신을 기준으로 해서 위치를 이동시킨다.
• 요소 위치 지정은 top, bottom, right, left를 사용하여 배치할 수 있다.

• 예시1) 요소1, 요소2, 요소3에 색을 입히고 요소2에 position: relative 속성을 적용시키고 위로 30px 왼쪽으로 30px을 주었다. 
• 두번째 요소가 자신의 위치에서 위로 30px, 왼쪽 30px을 이동한것을 확인할 수 있다.

3. position: absolute

• 자신과 가장 가까운 요소를 기준으로 절대적으로 위치를 이동시키는 속성이다. 따라서 relative 속성과 함께 사용되는 일이 많으며 부모요소가 존재해야만 한다. 
• 부모요소가 존재하지 않을 경우 브라우저 화면인 body요소를 기준으로 움직이게 된다.
• 또한 사용하게 될 경우 문서 흐름에서 제외당하는 특징이 있다.

• one을 부모로 삼는 one-child 요소를 추가하였다. one에는 부모요소 이기에 position: relative를 주고 one-child는 자식요소이기에 position: absolute를 주었다. 즉 one-child는 one을 기준으로 움직이라는 뜻이다.

• 자식요소가 밑에서 10px, 오른쪽에서 10px 떨어진 것을 확인 할 수 있다.

3. position: fixed

• 웹사이트를 보다보면 스크롤을 내려도 특정 부분이 움직이지 않고 계속해서 따라오는 UI를 보았을 것이다. 그럴 경우 쓰이는 기법이 position: fixed 이다. 
• fixed 속성은 화면에서 고정시킨다!

• fixed를 통해서 스크롤을 내려도 오른쪽과 아랫 부분에 10px씩 간격을 주고 있는 것을 확인할 수 있다.

주의할점) relative와 absolute를 통하여 요소를 배치할 때 부모요소가 알맞게 설정되었는지 잘 확인하자! 혼동되면 body를 기준으로 위치를 잡게 된다.