CSS(SCSS) - 배치(Position)

1. 배치(Position)

1) position

• 요소의 위치를 직접적으로 지정하는 것이 아닌 그 지정을 위한 어떤 기준을 작성해주는 속성을 말한다

static : 기준 없음
relative : 요소 자신을 기준
absolute : 위치 상 부모 요소를 기준
fixed : 뷰포트(ViewPort) 기준
sticky : 스크롤 영역 기준

참고사항)

• position과 같이 사용하는 CSS 속성(top, bottom, left, right)들에게도 음수를 사용할수 있다!
• absolute의 경우 위치 상 부모 요소를 꼭 확인해야 한다.

예시 전체코드)

.container {
  width: 300px;
  background-color: royalblue;
}

.container .item {
  border: 1px 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: 30px;
  left: 60px;
}
.container .item:nth-child(3) {
  width: 70px;
  height: 120px;
}

(1) position: relative; (부모 요소)

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

(2) position: absolute; (자식 요소)

.container {
  width: 300px;
  background-color: royalblue;
  position: relative;
}

...생략...

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

• 참고로 absolute는 부모요소가 없는 상태에서 값을 줄경우 부모요소인 container에 위치하지 않고 웹 브라우저의 뷰포트 기준으로 top: 30px, right: 30px의 값만큼 위치하게 된다.

2) 요소 쌓임 순서(Stack order)

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

1. 요소에 static을 제외한 나머지 position 속성 값(relative, absolute, fixed)이 있는 경우 위에 쌓임
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임

예제)

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

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

3) z-index

• 요소의 쌓임 정도를 지정하는 것을 말한다.

auto : 부모 요소와 동일한 쌓임 정도
숫자 : 숫자가 높을 수록 위에 쌓임