[CSS] 배치 (position)

seung·2022년 4월 21일

CSS

[MGS] 온라인 강의

목록 보기

1/5

position

요소의 위치 지정 기준

static: 기준 없음
relative: 요소 자신을 기준
absolute: 위치 상 부모요소를 기준
- 위치 상 부모 요소를 꼭 확인해야 함!
fixed: 뷰포트(브라우저)를 기준
sticky: 스크롤 영역 기준

position과 함께 사용하는 속성은 top, bottom, left, right, z-index 가 있다.
이 속성들은 모두 음수 사용이 가능하다.

아래와 같은 코드와 화면으로 배치에 대해 알아보자.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  width: 300px;
  background-color: royalblue;
}
.container .item {
  border: 4px dashed red;
  background-color: orange;
}
.container .item:nth-child(1) {
  width: 100px;
  height: 100px;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: relative;
  top: 20px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}

1. relative

relative는 자기 자신을 기준으로 하여 배치를 한다.

.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: relative;
  top: 20px;
  left: 70px;
}

2번 박스에 position과 위치 속성을 지정해보면 아래와 같은 결과가 나온다.
자기 자신을 기준으로 해서 위에서 20px, 왼쪽에서 70px 이동하라는 뜻이다.

그런데 위치가 이동되었지만 원래 2번 박스가 있던 곳에 빈 공간이 있는 것을 볼 수 있다.
만약 left 값을 엄청나게 큰 값을 주게 되면 화면에서 사라지면서 왜 빈 공간이 있는지 나중에 추측하기 어려워지므로 relative를 이용해서 자기자신을 기준으로 배치하는 경우는 잘 없다.

2. absolute

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

.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: absolute;
}

자신의 배치 기준은 부모 요소가 되기 때문에 1번, 3번 박스와 상호작용할 필요가 없기 때문에 붕 뜨면서 요소가 겹치게 된다.

그렇다면 위치 속성도 지정해주어 배치해보자.

.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: absolute;
  top: 30px;
  right: 30px;
}

그런데 이상하게도 부모요소인 파란색 박스를 기준으로 배치되지 않고 html을 기준으로 배치가 된 것을 볼 수 있다.

그 이유는 위치 상 부모요소 라는 단어를 잘 봐야한다.
위치 상 부모요소라는 말은 자기 자신의 요소로부터 ✨가장 가까이 position이 지정되어 있는 부모 요소✨를 뜻하는 것이다.

해당 코드에서는 부모 요소인 파란색 박스에 relative가 지정되어있지 않기 때문에 위치 상 부모요소는 뷰포트가 되는 것이다.

파란색 박스를 기준으로 배치하고 싶다면 파란색 박스에 position: relative;를 적용해주면 된다.

.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}
.container .item:nth-child(2) {
  width: 140px;
  height: 70px;
  position: absolute;
  top: 30px;
  right: 30px;
}

요소 쌓임 순서 (Stack order)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정하는 것이다.

요소에 position 속성의 값이 있는 경우 위에 쌓임 (기본값 static 제외)
1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
1번과 2번 조건이 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}
.container .item {
  width: 100px;
  height: 100px;
  border: 4px dashed red;
  background-color: orange;
}

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임

.container .item:nth-child(2) {
  position: absolute;
  top: 50px;
  left: 50px;
}

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

.container .item:nth-child(1) {
  position: relative;
  z-index: 1;
}
.container .item:nth-child(2) {
  position: absolute;
  top: 50px;
  left: 50px;
}
.container .item:nth-child(3) {
  z-index: 2;
}

3번 박스가 제일 위로 올라오지 않는 이유는 1번 조건인 position 지정이 안되어있기 때문에 z-index 값이 높아도 먹히지 않는다.

✨ z-index

요소의 쌓임 정도를 지정

auto: 부모 요소와 동일한 쌓임 정도

숫자: 숫자가 높을 수록 위에 쌓임

3. 1번과 2번 조건이 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

.container .item:nth-child(1) {
  position: relative;
  z-index: 1;
}
.container .item:nth-child(2) {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 2;
}
.container .item:nth-child(3) {
  position: fixed;
  z-index: 2;
}