[CSS] 요소의 위치 : position, z-index

🔻position🔻

• 1. padding : 부모가 자식의 위치를 지정한다.
• 2. margin : 스스로 위치 지정한다.
• 3. position : CSS1 ~ CSS3에서 자주 사용
• 4. transform : CSS4에서 자주 사용
• 좌표값을 사용하여 위치를 지정한다.
• x(left), y(top)
• 좌표를 지정하는 방식이 여러개이며, 원점(기준점)이 다양하다.

 

🔻속성🔻

1. static

• position: static
• 요소의 기본값이며, 일반적인 문서 흐름에 따라 배치된다.
• x,y 사용 불가능하다.
• FlowLayout

2. absolute

• position: absolute
• 절대 좌표
• top, bottom, left, right 등의 속성을 사용하여 요소의 위치를 조정할 수 있다.
• 문서의 좌측 상단을 원점으로 한다.
• 직계 조상 중에 가장 처음으로 만나는 태그를 원점으로 한다.
  • 단, position이 static이 아닌 태그이어야 한다.
• 원래 태그가 있던 공간은 사라진다.

3. relative

• position : relative
• 상대 좌표
• top, bottom, left, right 등의 속성을 사용하여 요소의 위치를 조정할 수 있다.
• 원래 위치를 원점(0,0) 으로 둔다.
• 원래 태그가 있던 공간은 그대로 유지된다.

4. fixed

• position : fixed
• 고정 좌표
• top, bottom, left, right 등의 속성을 사용하여 요소의 위치를 조정할 수 있다.
• 브라우저 창의 좌측 상단을 원점으로 한다.
• 원래 태그가 있던 공간은 사라진다.
• 스크롤을 내리거나 올려도 항상 같은 위치에 남아 있다.
• 주로 페이지 상단에 고정된 메뉴나 광고 등에 사용된다.

---

🔻z-index🔻

• 요소의 쌓임 순서를 지정하는데 사용된다.
• 기본적으로 HTML 문서에서 요소들은 순서대로 그려지기 때문에, 나중에 나오는 요소가 이전에 나온 요소 위에 그려진다. 그러나 z-index를 사용하면 이 기본 동작을 무시하고 원하는 순서대로 요소를 쌓을 수 있다.
• 높은 값일수록 위에 난다. 음수 값도 가능하며, 이 경우에는 배경 레벨 아래에 나타난다.

.box1 {
  z-index: 1;
}

.box2 {
  z-index: 2;
}

.box3 {
  z-index: -1;
}

 

• 주의할 점은 z-index는 position 속성이 static이 아닌 요소에만 적용된다. 즉, relative, absolute, fixed 등의 position 속성이 설정된 요소에서만 z-index가 작동한다.
• 또한, z-index는 부모와 자식 요소 간에 영향을 미친다. 즉, 부모 요소의 z-index 값이 자식 요소의 z-index 값보다 높으면 부모 요소의 자식 요소들이 위에 나타난다.