1. 위치(Position)

1-1. static

• 기본값
• HTML 기본 배치 순서인 왼쪽에서 오른쪽, 위에서 아래로 배치
• 부모 요소의 위치가 기준이 됨

1-2. relative

• top, bottom, left, right 속성 사용 가능
• 부모 요소를 기준
• 기본적인 동작 원리는 기본값인 static과 동일

1-3. absolute

• top, bottom, left, right 속성 사용 가능
• static요소가 아닌 가장 가까운 조상 요소를 기준(가장 가까운 relative, absolute, fixed 조상 기준)
• 부모와 모든 조상 요소가 static일 경우, document body 기준
• 다른 요소와 위치가 겹쳐도 덮어씀 (float)
• absolute로 선언을 하게 되면 width가 inline 요소처럼 컨텐츠의 너비에 맞게 변화되므로 적절한 width를 지정해야 함

1-4. fixed

• top, bottom, left, right 속성 사용 가능
• viewport 기준
• 스크롤이 되어도 항상 화면상 절대적인 위치가 고정
• fixed로 선언을 하게 되면 width가 inline 요소처럼 컨텐츠의 너비에 맞게 변화되므로 적절한 width를 지정해야 함

2. z-index

컴퓨터 화면이 x축과 y축만 있는 2차원 평면이 아니라 화면을 보는 나와 얼마나 가까이 또는 멀리 있는지를 나타내는 z축까지 있다고 생각해보면 쉽게 이해할 수 있는 속성이다.

• z-index 속성값이 크면 클수록 요소가 전면에 출력 (나와 가까이 있음)
• z-index 속성값이 적용되려면 요소의 display 속성값이 기본값(static)이 아니어야 함
• z-index 속성은 요소의 계층 구조가 상위일수록(root에 가까울수록) 우선 순위가 높음 (자식의 z-index값을 암만 올려봤자 조상 엘리먼트의 z-index가 작으면 소용없음)

3. overflow

overflow 프로퍼티는 자식 요소가 부모 요소의 영역를 벗어났을 때 처리 방법을 정의