박스 모델과 position

position

박스 구성 요소들을 배치하기 위한 속성.

어떤 position 속성을 사용 하냐에 따라 위치가 달라질 수 있음.

1. static

• position 속성의 기본 값.
• 좌우로 원하는 만큼 이동 수치를 설정해도 전혀 이동하지 않고 가지고 있는 html구조에 의해 위치.
• float속성을 이용해 좌우로 배치할 수 있음.

2. relative

• static과 같이 나열한 순서대로 배치되지만 top, right, bottom, left 속성을 사용해 원하는 위치를 지정할 수 있다.
• 원래 본인이 있던 자리를 기준으로 설정한 가로, 세로만큼 이동하여 위치.

3. absolute

• top, right, bottom, left 속성 값을 이용해 요소를 원하는 위치에 배치할 수 있다.
• 부모의 왼쪽 상단을 기준으로 자리 잡음.
• 부모가 position속성이 없다면 브라우저 화면의 좌측 상단을 기준으로 설정.

4. Fixed

• 위치의 기준이 부모가 아닌 브라우저 창(Browser Window)임.
• 페이지를 스크롤 하더라도 계속 고정되어 표시됨.
• 항상 그 위치에 고정.

5. sticky

• CSS에 비교적 최근에 추가
• 스크롤 하지 않을 때는 static position처럼 동작하다가 스크롤 할 때는 fixed position과 비슷하게 동작
• ticky를 감싸는 부모가 overflow:hidden을 가지고 있으면 동작하지 않음

left, right, top, bottom 태그

• 태그의 위치를 원하는 곳으로 지정할 수 있음.
• 주로 position 속성과 함께 사용하며 position 속성의 값이 static 일 때는 위치 정보가 적용되지 않음.
• 4가지 속성 중 반대되는 left, right 와 top, bottom 을 동시에 적용하면 나중에 선언한 값이 적용됨.
  • left : 문서 좌측에서 태그 좌측 좌표 거리
  • right : 문서 우측에서 태그 우측 좌표 거리
  • top : 문서 상단에서 태그 상단 좌표 거리
  • bottom : 문서 하단에서 태그 하단 좌표 거리

z-index

• 박스들이 중첩되는 경우 박스들의 수직 위치를 조정하기 위한 속성.
• z-index 값이 높을수록 위, 작을수록 아래에 배치
• position 속성이 적용된 경우에만 의미가 있음.