Position

포지션 속성은 요소에 사용되는 위치 지정 방법의 유형을 지정

다섯 가지 Position값이 있습니다.

1. static
2. relative
3. fixed
4. absolute
5. sticky

 

1. static

정적으로 배치되어 top, bottom, left, right속성의 영향을 받지 않습니다.
또한 position을 별도로 지정해주지 않아도 기본값으로 static이 적용됩니다.

2. relative

요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 요소를 원래 위치를 기준으로 top, bottom, left, right 속성을 이용해서 위치할 수 있습니다.

3. fixed

화면을 스크롤 하더라도 요소의 위치를 top, bottom, left, right 속성을 이용하여 고정 할 수 있습니다.

4. absolute

요소의 position이 absolute일때는 배치 기준을 자신이 아닌 상위 요소에서 찾습니다. static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정됩니다. (없다면 body)

5. sticky

table에서 열고정, 행고정을 예시로 보시면 됩니다.