position 속성 - relative, absolute, fixed

웹문서를 작성하다 보면 복잡한 레이아웃을 만들어야 할때가 있는데,
이럴때 요소들의 위치를 posion속성으로 정해줄 수 있습니다.

1. position: relative;

position: relative; 자체는 의미가 없으며, top,bottom과 같은 속성과 함께 써야 의미가 있습니다.

2. position: absolute;

position: absolute; 특정 부모 요소에 대해 절대적인 위치를 가집니다.
부모 요소 중에 position이 relative, fixed, absolute 하나라도 있으면
그 부모 요소에 대해 절대적으로 움직이게 됩니다.

일반적으로 absolute를 쓸 경우, 부모 요소에 position: relative; 를 사용합니다.

3. position: fixed;

position: fixed; 를 사용하면, 웹문서에서 스크롤을 내려도 항상 같은 위치에
요소가 고정되어 보이게 됩니다.

absolute는 relative를 가진 부모 요소가 필요했지만, fixed는 부모 요소가 필요 없습니다.