[CSS3] z-index

---

알고있으면 좋은 CSS3 Tip✨

---

z-index

• 요소들의 쌓임 순서를 제어하는 데 사용된다.
• 원하는 순서대로 배치할 수 있는 기능으로 몇 가지 특성을 가진다.
  1. position 속성이 relatuve 거나 absolute 일 때 동작한다.
  2. 기본값은 auto이며 음수, 양수의 숫자를 사용할 수 있다.
  3. z-index 의 값인 숫자가 높을 수록 가장 상단(보이는 화면에서 가깝게)에 배치되며 낮을 수록(보이는 화면에서 멀게) 배치된다.
  4. z-index는 같은 선상에 있는 태그값부터 확인하지만 부모 태그의 z-index가 우선이기 때문에 자식 태그가 z-index 숫자가 크더라도 부모 태그의 값을 우선시한다.
  5. z-index는 형제들끼리만 영향을 받을 때도 있다.

 

z-index가 있는 경우 요소 간 상대적 깊이는?

• 첫 번째 상자의 z-index 속성을 1로 설정해주면, 두 번째 상자의 앞으로 나오는 것을 볼 수 있다.

• 두 번째 상자의 z-index 속성을 2로 설정하면 두 번째 상자가 첫 번째 상자의 앞으로 나올 것이다.

 

z-index가 비교되는 범위는?

• z-index는 특정 범위 내에서 비교되며, 이것을 CSS에는 stacking context라고 부른다.
• 아래의 두 상자의 z-index 값은 서로 다른 범위에서 비교된다.

• 첫 번째 상자는 z-index 값이 1인 요소에 감싸져있기 때문에, 두 번째 상자의 z-index 값과 직접 비교되지 않는다. 따라서 첫 번째 상자의 z-index 값이 아무리 크더라도 절대 부모인 요소의 외부에 있는 다른 요소의 z-index 값과 경쟁할 수가 없다.

codepen 참고 사이트 : https://www.daleseo.com/css-z-index/