Position 속성

• CSS에서 Position속성은 HTML문서 상에서 요소가 배치되는 방식을 결정한다. 정확한 위치 지정을 위해 top, bottom, right, left속성과 함께 사용된다.
• static, relative, absolute, fixed, sticky로 position에 값을 줄 수 있다.

1. static

• position의 기본값이며 따로 설정을 하지 않아도 됨.
• top, bottom, right, left속성들이 영향을 주지 못함.

2. relative

• 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정
• static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값
• 자체로는 의미가 없음. 딱히 어느 위치로 이동 X
• 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.

3. absolute

• absolute 속성값은 브라우저가 문서의 흐름과 상관없이 (요소를 수직으로 쭉 놓을지, 수평으로 쭉 놓을지 등을 결정하는 것) left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값
• 즉, 부모요소를 기준으로 절대적인 위치를 설정.

4. fixed

• absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정
• fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다.