【Css】Z-index에 대해 No-1(stacking context)

9687 단어 SassCSS

처음에



css에서 요소의 스택 순서를 결정하는 z-index. 단지 z-index에 값을 지정하는 것만으로는 작동하지 않는 장면이 있습니다. 그 원인과 이유에 대해 배운 내용을 써 보았습니다.

※내용에 실수등이 있는 경우는 지적을 잘 부탁드립니다.

z-index란?



MDN의 공식 문서에는 다음과 같이 해설되어 있습니다.

CSS의 z-index 속성은 위치 지정 요소와 그 자손 요소 또는 플렉스 항목의 z 순서를 정의합니다. 보다 큰 z-index 를 가지는 요소는 보다 작은 요소 위에 겹칩니다.

요컨대 같은 적층 컨텍스트(stacking context)내의 요소끼리의 적층 레벨을 지정해, 표시되는 상하의 위치 관계를 지정하는 프로퍼티입니다. 여기서 중요한 개념은 stacking context입니다.

단순히 z-index 값을 높이는 것만으로 요소의 겹침 정도는 변하지 않습니다.



요소는 설명한 순서대로 아래에서 위로 쌓입니다.
<body>

  <div class="red"></div>
  <div class="blue"></div>
  <div class="yellow"></div>

</body>

.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: -50px;
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-bottom: -50px;
}

.yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

이것을 빨간색 위에 파란색, 그 위에 노란색이 쌓여 있습니다.

이 상태에서 파랑을 맨 아래로 하고, 다음에 빨강, 노랑이 오도록 z-index를 지정해 보겠습니다.
.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: -50px;
  z-index: 2;                //追記
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-bottom: -50px;
  z-index: 1;  　　　　　　　　 //追記
}

.yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
  z-index: 3;　　　　　　　　   //追記
}

결과는 이전과 동일합니다. 이런 식으로 z-index를 지정하는 것만으로는 요소의 스택 순서를 변경할 수 없습니다.



Context란?



요소가 쌓이기 위해서는 토대(베이스)가 되는 것이 필요합니다. 집이 세우려면 토대가 되는 지면이 없으면 안 되네요. 그것과 마찬가지로 요소는 무언가의 기초 위에 쌓입니다. css에서는 스택의 개념으로 context라는 것이 있습니다. 같은 context(기초)의 요소끼리만 z-index는 적용되지 않습니다.
html은 계층 구조이며 요소에는 반드시 부모와 자식 관계가 있습니다. 요소의 적층 순서는 부모 요소가 context(토대)이며, 그 context상의 같은 계층의 형제 요소(siblings)끼리에만 적용됩니다. 앞의 예에서 말하면 body 요소의 context상에 red, blue, yellow라는 3개의 형제 요소가 있으므로, 적층 순서가 정해지는 것입니다.
<body>                           //bodyタグが親要素でありcontextを生成している
  <div class="red"></div>             //bodyが生成するcontext内にある
  <div class="blue"></div>
  <div class="yellow"></div>
</body>

만약 다음과 같이 레드 안에 bule가 있고 blue 안에 한층 더 yellow가 있었다면 어떻게 될까요?
<body>
 <div class="red">
    <div class="blue">
      <div class="yellow"></div>
    </div>
  </div>
</body>

CSS의 설명은 다음과 같습니다.
.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: -50px;
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-bottom: -50px;
}

.yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

결과적으로는 노란색만 되어 버렸습니다.

이 이유는 body 태그의 컨텍스트에 red가 있고 red 태그의 컨텍스트에 더 blue가 있고 blue 태그의 컨텍스트에 yellow가 있기 때문입니다. 토대가 각각 body,red,blue와 다르기 때문에 집(red,blue,yellow)도 그 3개의 토대를 기준으로 세우고 있습니다(stacking). 즉, 요소의 적층 순서는 부모 요소를 기준으로 한 동일한 컨텍스트 내에서 결정됩니다.

참고 사이트



htps : //에서 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / cs / u b / Cs / ~ 어서 x
htps : // 코 s. 코 m / r 치 c ぇ s / 부이 ld ぇ b 해서 s / 오페라 치온 / cs s / 4- 레 아소 s ~ . HTML
htps : // 그럼 아안. 이. jp / ぇ bp 로즈 c 치온 / f 롱텐 d / ~ 어서 x /
htps : // 이 m / 17296 / ms / 42 62989193504d512c7
Jupyter Notebook으로 MongoDB를 설정하는 방법
Next.js API 경로 - 전역 오류 처리 및 깨끗한 코드 관행

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage