작성완료
요소의 위치
CSS의 요소 위치 속성에는 static, relative, absolute, fixed가 있으며, 각 속성은 부모 또는 뷰포트 기준으로 이동합니다. z-index는 숫자가 클수록 앞에 배치되며, overflow는 자식 요소가 부모를 벗어날 때의 처리 방법을 정의합니다.
position
기준, 좌표 프로퍼티 (top, bottom, left, right)
- static (Default값) : 부모 요소의 위치 기준
- relative : 자신이 static일 때 기준에서 좌표 프로퍼티만큼 이동
- absolute : static이 아닌 부모, 조상 요소중 가장 가까운 요소를 기준으로 좌표 프로퍼티만큼 이동.
- absolute 선언시 block요소의 width는 content에 맞게 변환 되므로 width값을 지정해줘야함.
- fixed : 부모요소와 관계없이 브라우저의 viewport 기준으로 좌표 프로퍼티만큼 이동.
- 스크롤이 되어도 viewport에 고정
- absolute와 마찬가지로 content에 맞게 width가 변환되므로 width를 지정해줘야함.
z-index
숫자가 클수록 앞으로 배치 (단, position이 static이 아닌 요소에만 적용)
overflow
- 자식 요소가 부모 요소를 벗어날 때 처리 방법
- 속성값 : visible, hidden, scroll, auto가 존재