[CSS] - (5) Position

position

position 은 요소를 원하는 위치로 배치할 수 있도록 하는 속성이다.

position: static | relative | absolute | fixed | sticky;

---

① static

• 모든 요소의 기본 position 값이다.
• 위치 기준이 없어 top, right, bottom, left 가 적용되지 않는다.

② relative

• 자기 자신을 기준으로 이동한다.
• 원래 위치를 유지하며 자기 자리에서 살짝 이동하는 개념
• 다른 형제 요소들도 원래 자리 기준으로 그대로 유지된다.

position: relative;
top: 10px; <--! 위에서부터 10px 내려감 -->
right: 20px; <--! 오른쪽에서부터 20px 왼쪽으로 이동 -->

③ absolute

• 조상 요소를 기준으로 배치
• 단, 조상 중에서 positive: static 이 아닌 요소를 기준으로 한다.
• 그런 조상이 없으면 → viewport 기준
• 자리 차지 유지 안하며 완전히 붕 떠서 배치된다.

absolute를 사용할 때는
부모 요소에 position: relative; 를 함께 설정한다.

.parent {
  position: relative; <--! → 기준점을 꼭 설정해줘야 원하는 위치에 정확히 배치 가능 -->
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

④ fixed

• viewport를 기준으로 배치
• 스크롤해도 위치가 고정된다.

position: fixed;
bottom: 0;

⑤ sticky

• 스크롤 위치에 따라 relative → fixed처럼 동작한다.

---

위치 지정 가능

position 과 함께 사용하는 속성:
top | right | bottom | left

• 가로 방향 → left 또는 right 중 하나
• 세로 방향 → top 또는 bottom 중 하나

---

z-index

요소의 쌓이는 순서를 결정하는 속성이다.

• 값이 클수록 위에 올라간다.
• position 이 적용된 요소에서만 동작한다. (static 에서는 적용되지 않음)
• 같은 부모 안에서만 비교된다.