- position 속성 - relative, absolute, fixed
- inline, inline-block, block 에 대해서
Position
- relative
- 자기 자신을 기준으로 top / right / bottom / left 값에 따라 적용한다
- absolute
- 위치 지정 요소가 없다면 컨테이닝 블록이 기준이 된다
- 절대 좌표와 함께 위치를 지정한다 (원래 위치와 상관없이 지정 가능)
- 가장 가까운 상위 요소 (부모 태그)를 기준으로 위치가 결정 된다
- 부모 태그 중 relative/absolute/fixed 태그가 없다면 최상위 태그가 기준이 된다
- fixed
- 컨테이닝 블록을 기준 삼아 배치된다
- 항상 최좌측 상단을 기준으로 좌표가 고정 된다
- 사용자가 보는 화면을 기준으로 움직인다
- 스크롤 되어도 위치에 고정되어 있다
Display
- inline
- 줄바꿈 없이 한줄에 다른 요소들과 나란히 배치된다
- 예시) span, a, img 태그
- 상하단 속성 정의해도 적용되지 않는다
- inline-block
- inline과 다르게 요소의 너비와 높이를 설정하게 해준다
- 위아래 패딩/마진이 살아있다
- block
- 한줄에 나열되지 않으며 자체가 한줄을 차지한다
- 예시) p / li / div / h1 / section 등
- 너비 100% 속성이 있기에 다음 요소가 자연스럽게 줄넘김이 된다
