배치

01.top, bottom, left, right

• 요소의 각 방향별 거리 지정
• auto: 브라우저가 계산

02.position

• 요소의 위치 지정 기준
• static: 기준 없음
• relative: 요소 자신을 기준
• absolute: 위치 상 부모 요소를 기준
• fixed: 뷰포트(브라우저)를 기준

• absolute는 구조상의 부모 요소가 아닌 위치상(position)의 부모 요소를 기준으로 배치됩니다.
• 만약 absolute가 위치상 부모 묘소를 찾지 못하면 뷰포트를 기준으로 배치됩니다.
• position 속성 값으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 자동 변경됩니다.

2-1.relative 속성

• 오렌지색 세개의 자식 요소들중 2번째 자식의 위치를 바꾸고 싶다면 먼저 배치할 대상의 기준부터 정해야 됩니다.
• 만약 배치 기준을 정하지 않은 상태에서 요소에 상하좌우 값을 넣으면 아무련 변화가 없습니다.

• 현재 2번 요소가 기존에 있었던 위치의 위쪽에서 30px, 왼쪽에서 30px 거리 만큼 떨어져서 배치 된것을 확인할 수 있다.

2-2.absolute 속성

• absolute은 위치상 부모요소 기준으로 배치 되기 때문에 위치상 부모요소를 정확히 지정해 줘야 합니다.
• 만약 그렇지 않으면 이처럼 자동으로 화면(뷰포트)를 기준으로 배치되게 된다.

• 파란색 배경 요소를 정확히 위치상 부모 요소로 지정해준 상태에서 2번 요소를 배치 시킨다.
• 그럼 위치상 부모 요소 안에서 위쪽에서 30px, 오른쪽에서 30px 거리만큼 떨어져서 배치 되는 것을 확인할 수 있다.

2-3.fixed 속성

• 뷰포트(브라우저)를 기준으로 배치한다.
• 그럼 브라우저 위쪽에서 30px, 오른쪽에서 30px 거리만큼 떨어져서 배치되는 것을 확인할 수 있다.

2-4.position 속성의 값으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 자동 변경됨

03.요소 쌓임 순서(Stack Order)

• 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
• ➀ 요소에 position 속성 값이 있는 경우 위에 쌓임(기본값 static 제외)
• ➁ 1번 조건이 같은 경우 z-index 속성의 숫자 값이 높을수록 위에 쌓임
• ➂ 1번과 2번 조건까지 같은 경우 HTML의 다음 구조일수록 위에 쌓임

3-1.position 속성값에 따른 쌓임 순서

• 1번과 2번 요소에 position 속성이 있지만 3번 요소에는 position 속성이 없기 때문에 1번과 2번 요소가 3번 요소 보다 더 위에 쌓이는 것을 확인 할 수 있다.
• HTML 구조에서 2번 요소가 1번 요소보다 다음에 있기 때문에 2번 요소가 1번 요소 보다 더 위에 쌓이는 것도 확인 할 수 있다.

04.z-index

• 요소의 쌓임 정도를 지정
• z-index: auto: 부모 요소와 동일한 쌓임 정도(auto==0)
• z-index: 1: 숫자가 높을 수록 위에 쌓임
• z-index: -1: 음수도 사용 가능

4-1.z-index 속성값에 따른 쌓임 순서

• 현재 1번과 2번요소 모두 position 속성이 있고 HTML 태그 구조에서는 2번 요소가 1번 요소보다 뒤에 있는 상황이다.
• HTML 태그에서 다음 구조에 있는 2번 요소가 가장 위에서 있어야 될 것 같지만 z-index의 숫자가 더 높은 1번 요소가 가장 위에 쌓이는 것을 확일 할 수 있다.
• 1번 요소보다 z-index값이 더 높은 3번 요소가 가장 아래쪽에 쌓이는 이유는 바로 3번 요소 스타일에 position값이 없기 때문에 이미 조건 1번에서 밀리기 때문에 z-index값이 아무리 높아도 가장 아래에 쌓인다.
• 만약 3번을 가장 위쪽에 쌓이게 하고 싶다면 3번 요소 스타일에 position속성에 아무거나 넣어주면 된다.