CSS Position

📍CSS Position

문서 상에서 요소를 배치하는 방법을 지정한다.
top, bottom, left, right가 최종적으로 위치를 지정한다.

• 위치 지정시 top, bottom 둘중 1개, left, right 둘중 1개만 사용하는 걸 추천한다.
• z-index : 수직방향 (정수로 위치 지정)

🔎Position 속성

📔 static

• 모든 요소의 기본값

📔 relative

• 기준점 : 자기가 본래 있던 자리 기준

  float 처럼 '붕~뜬다' 다만 부모, 형제 요소 모두 다 해당 요소를 인식하기 때문에 다른 요소에는 영향을 주지 않는 속성으로 보면 된다. (사용하기 가장 편한 속성)

📔 absolute

• 기준점 : 자신을 감싸고 있는 조상 중 position 속성이 static이 아닌 요소

  float와 동일하다. (단, float와 다르게 inline 요소가 인식을 못하고 완전 무시함)

• 원하는 기준점 요소의 position을 relative로 설정하면 원하는 기준점을 설정 할 수 있다.

📔 fixed

• 기준점 : viewport (창 영역 전체)

  기준점을 제외하고 모두 absolute와 같다.

참고

김버그의 css는 재밌다.