CSS 속성(7) - 배치(position)

배치(position)

position는 요소의 위치 지정을 위한 기준을 설정하는 속성입니다.

static란 기본값(기준 없음)이 들어 있습니다.

relative 값은 요소 자신을 기준으로 생각해서 배치됩니다.

absolute 값은 위치 상 부모 요소를 기준으로 배치됩니다.

fixed 값은 뷰포트(브라우저)를 기준으로 배치됩니다.

sticky 값은 스크롤 영역을 기준으로 배치됩니다.

 

기준을 정한 후, top, bottom, left, right 방향을 알려줘야 합니다.

z-index 속성도 사용 가능합니다.

z-index는 요소들 쌓이는 순서를 알려주는 속성입니다.

 

top, bottom, left, right는 요소의 각 방향별 거리를 지정합니다.

auto란 기본값(브라우저가 계산함)이 들어 있으며,

px, em, rem등 단위로도 지정할 수 있습니다.

 

position과 같이 사용하는 CSS 속성들은 모두 음수를 사용할 수 있습니다.

 

relative 및 absolute 비교

position 속성 추가하지 않는 상태

position: relative

position속성이 relative일 때, 위 예시처럼,

B요소 자신 기준으로 top부터 50px, left부터 200px로 재배치되었습니다.

원위치는 시각적으로 비어있는 것으로 나타납니다.

C요소는 생뚱맞게 허공에 나타난만큼

실무에서 relative를 거의 사용 안 합니다.

 

position: absolute

position 속성이 absolute로 변경하면, 위 예시처럼,

A 요소 밑에 바로 C요소가 따라옵니다.

absolute는 위치상 부모 요소를 기준으로 배치된다는데

B요소는 blue박스를 부모 요소를 삶지 않고 뷰포트가 부모 요소를 되어 버렸습니다.

 

부모요소 position: relative 추가

부모 요소인 blue박스에 position: relative를 추가한 후

B요소의 배치 자리를 바뀌었습니다.

 

정리하자면,

absolute를 사용하고 싶으면, 어떤 요소 기준을 삶고 싶은 점을 먼저 고려해,

해당 요소에 position: relative 추가되면 이 요소는 위치상 부모 요소가 됩니다.

만약 아무 요소에도 relative 값을 부여하지 않았다면 뷰포트를 부모 요소됩니다.

 

요소 쌓임 순서(stack order)

stack order은 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지)를 결정합니다.

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임. (기본값 static 제외)

2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임

3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조(더 나중에 작성된 구조)일 수록 위에 쌓임.

 

z-index는 어떤 요소의 쌓임 정도를 지정하는 속성입니다.

auto란 기본값(부모 요소와 동일한 쌓임 정도)이 들어 있습니다.

숫자가 높을 수록 위에 쌓입니다.

일반적으로 숫자는 1부터 시작한 양수로 사용하지만

-1도 가끔 사용합니다.