CSS 위치(position, 포지션)

static: 기본값

static

 

---

fixed: 특정 위치에 고정

• 부모 요소가 아닌 브라우저 화면 기준(상대적 위치)으로 배치.
• 스크롤에 영향을 받지 않음.
• 페이지 내 공간을 차지하지 않음.
• z-index 값으로 앞/뒷쪽 배치 가능.

fixed

 

---

relative: static(기본값)이나 abolute를 포함하는 부모요소에 따른 상대적 배치

• z-index 값으로 앞/뒷쪽 배치 가능.

relative

relative

---

absolute: 부모 요소에 따른 상대적 배치

• 스크롤에 영향을 받지 않음.
• 페이지 내 공간을 차지하지 않음.
• z-index 값으로 앞/뒷쪽 배치 가능.

absolute

absolute

---

z-index: 수직 배치

• 값은 정수로 입력.
• 값이 클수록 앞쪽으로 배치.

z-index

z-index