Stacking Context

z-index를 사용함에 있어 조건과 규칙을 정리한다.

1. Stacking Context 생성

먼저 z-index를 적용하기 위해선 relative, absolute 등과 같은 position속성을 지정해 Stacking Context를 생성해줘야 한다.

      <div
        style={{
          position: "relative",
          width: "100%",
          height: "100px",
          backgroundColor: "#dedede",
          zIndex: "10",
        }}
      >
        Stacking Context 생성
      </div>

그러면 Z축 공간을 사용할 수 있게되며, 해당 페이지에 생성된 Stacking Context의 z-index를 비교하여 순서대로 합성하게 된다.

이때 position의 속성의 상하 관계는 없다.

2. 자식 요소들은 생성된 부모 Stacking Context에 종속된다.

A컴포넌트 - z-index: 20

B컴포넌트 - z-index: 10

이 경우 A컴포넌트가 위로 올라오게 된다. (아래 예시에서는 형제 요소로 했지만 A, B의 관계는 상관없이 한 페이지에 같이 존재하게 될 경우 둘은 z-index로 맞붙게 된다.)

 

그러나 B컴포넌트의 자식요소가 z-index를 9999를 가지든 position absolute를 가지든 상관없이 z-index: 20을 가진 A요소보다 앞에 그려질 수 없다.

 

즉, Stacking Context가 생성됐다면 해당 요소의 자식 요소들은 그 컨텍스트 안에서만 z-index를 비교하게 된다.

function App() {
  return (
    <div>
      <div
        style={{
          position: "absolute",
          top: "0",
          width: "200px",
          height: "200px",
          backgroundColor: "red",
          zIndex: "20",
        }}
      >
        A
      </div>
      <div
        style={{
          position: "relative",
          width: "300px",
          height: "300px",
          backgroundColor: "blue",
          zIndex: "10",
        }}
      >
        B
        <div
          style={{
            position: "absolute",
            top: "0",
            width: "100px",
            height: "100px",
            backgroundColor: "green",
            zIndex: "999999",
          }}
        >
          C
        </div>
      </div>
    </div>
  );
}

export default App;

3. 생성된 Stacking Context 안의 자식 요소에는 position 속성 지정 필요x

예를 들어 B요소 아래 자식 요소들이 여러개 있어 그 자식 요소들끼리 비교하려한다면 position을 지정해줄 필요 없이 z-index 속성만 지정해줘도 콘텍스트 안에서 비교하여 합성이 일어난다.

function App() {
  return (
    <div
      style={{
        position: "relative",
        width: "300px",
        height: "300px",
        backgroundColor: "blue",
        zIndex: "10",
      }}
    >
      B
      <div
        style={{
          width: "200px",
          height: "200px",
          backgroundColor: "green",
          zIndex: "10",
        }}
      >
        C
      </div>
      <div
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "red",
          zIndex: "10",
        }}
      >
        D
      </div>
      <div
        style={{
          width: "50px",
          height: "50px",
          backgroundColor: "black",
          zIndex: "0",
        }}
      >
        E
      </div>
    </div>
  );
}

export default App;