몇 가지 흥미로운 CSS 주제에 대해 이야기해 보겠습니다. (3) - 스택 순서와 스택 컨텍스트에 대해 얼마나 알고 있나요?

이 시리즈는 몇 가지 흥미로운 CSS 주제를 논의하는 첫 번째 시리즈이며, 일부 주제는 문제 해결을 위한 아이디어를 넓히기 위해 고안되었습니다. 또한 쉽게 간과할 수 있는 몇 가지 CSS 세부 사항도 포함합니다.

문제 해결 시 호환성은 고려되지 않습니다. 질문이 거칠고 제약이 없습니다. 문제 해결에서 익숙하지 않다고 생각되는 CSS 속성이 있으면 빨리 공부하세요. .

계속 업데이트하고, 계속 업데이트하고, 계속 업데이트하고, 중요한 것을 세 번 말하세요.

모든 주제는 내 Github에 요약되어 있습니다.

3. 스태킹 레벨과 스태킹 컨텍스트에 대해 얼마나 알고 있나요?

z-index는 아주 단순해 보이지만 z-index의 레벨에 따라 캐스케이딩의 우선순위가 결정됩니다. 사실 더 깊이 들어가 보면 그 안에 뭔가가 숨겨져 있다는 것을 알 수 있습니다.

다음 질문을 보고 동일한 상위 div 태그 아래에 포함된 두 개의 div A와 B를 정의하세요. HTML 구조는 다음과 같습니다.

<div class="container">
    <div class="inline-block">#divA display:inline-block</div>
    <div class="float"> #divB float:left</div>
</div>

CSS의 정의는 다음과 같습니다.

.container{
    position:relative;
    background:#ddd;
}
.container > div{
    width:200px;
    height:200px;
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

대략 설명하면 공통 상위 컨테이너를 가진 두 DIV가 겹쳐진다는 뜻입니다. display:inline-block가 위에 쌓인 건가요, 아니면 float:left가 위에 쌓인 건가요?

여기서 DOM의 순서는 display:inline-block 을 먼저 생성한 다음 float:left 을 생성하는 것입니다. 물론 다음과 같이 두 DOM의 순서를 바꿀 수도 있습니다.

<div class="container">
    <div class="float"> #divB float:left</div>
    <div class="inline-block">#divA display:inline-block</div>
</div>

会发现，无论顺序如何，始终是 display:inline-block 的 div 叠在上方。

Demo戳我。

这里其实是涉及了所谓的层叠水平（stacking level)，有一张图可以很好的诠释：

运用上图的逻辑，上面的题目就迎刃而解，inline-blcok 的 stacking level 比之 float 要高，所以无论 DOM 的先后顺序都堆叠在上面。

不过上面图示的说法有一些不准确，按照 W3官方 的说法，准确的 7 层为：

1. the background and borders of the element forming the stacking context.

2. the child stacking contexts with negative stack levels (most negative first).

3. the in-flow, non-inline-level, non-positioned descendants.

4. the non-positioned floats.

5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

7. the child stacking contexts with positive stack levels (least positive first).

稍微翻译一下：

1. 形成堆叠上下文环境的元素的背景与边框

2. 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）

3. 正常流式布局，非 inline-block，无 position 定位（static除外）的子元素

4. 无 position 定位（static除外）的 float 浮动元素

5. 正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）

6. 拥有 z-index:0 的子堆叠上下文元素

7. 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

所以我们的两个 div 的比较是基于上面所列出来的 4 和 5 。5 的 stacking level 更高，所以叠得更高。

不过！不过！不过！重点来了，请注意，上面的比较是基于两个 div 都没有形成 堆叠上下文 这个为基础的。下面我们修改一下题目，给两个 div ，增加一个 opacity:

.container{
    position:relative;
    background:#ddd;
}
.container > div{
    width:200px;
    height:200px;
    opacity:0.9; // 注意这里，增加一个 opacity
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

데모가 나를 찔렀다.

에서는 inline-block의 div가 더 이상 float의 div 위에 쌓일 필요는 없지만 HTML 코드에서 DOM의 쌓인 순서와 관련이 있음을 알 수 있습니다. 나중에 추가된 div는 먼저 추가된 div 위에 겹칩니다.

여기서 핵심은 추가된 opacity:0.9이 두 div에 대해 stacking context（堆叠上下文） 개념을 생성한다는 것입니다. 이때, 2개를 쌓기 위해서는 z-index가 필요합니다. z-index가 높을수록 stacking 수준이 높아집니다.

스태킹 컨텍스트는 창(컴퓨터 화면)이나 웹 페이지를 바라보는 사용자를 기준으로 가상의 Z축을 따라 확장되는 HTML 요소의 3차원 개념으로, HTML 요소는 자체 속성에 따라 우선순위가 지정됩니다. 주문은 누적 컨텍스트에서 공간을 차지합니다.

그렇다면 어떻게 요소 형성을 촉발할 수 있을까요 堆叠上下文 ? MDN에서 발췌한 방법은 다음과 같습니다.

• 루트 요소(HTML),
• "자동"이 아닌 Z-색인 값을 사용한 절대/상대 위치 지정,
• "auto" 이외의 z-index 값을 갖는 플렉스 항목, 즉 상위 요소 표시: flex|inline-flex,
• 불투명도 속성값이 1보다 작은 요소(불투명도 사양 참조),
• 변형 속성 값이 "none"이 아닌 요소,
• mix-blend-mode 속성 값이 "normal"이 아닌 요소,
• 필터 값이 "none"이 아닌 요소,
• 관점 값이 "없음"이 아닌 요소,
• 격리 속성이 "격리"로 설정된 요소,
• 위치: 고정
• 속성 값을 직접 지정하지 않더라도 will-change에서 CSS 속성을 지정하세요.
• -요소
, webkit-overflow-scrolling 속성이 "touch"로 설정됨

그래서 위의 두 div에 opacity 속성을 추가하는 목적은 스태킹 컨텍스트를 형성하는 것입니다. 즉, 불투명도를 추가하고 위에 나열된 속성을 바꾸면 동일한 효과를 얻을 수 있습니다.

스태킹 컨텍스트에서는 위에 설명된 규칙에 따라 해당 하위 요소도 스택됩니다. 특히 하위 요소의 z-index 값은 상위 계단식 컨텍스트에서만 의미가 있다는 점을 언급할 가치가 있습니다. 즉, 상위 요소의 z-index는 상위 요소의 다른 형제 요소보다 낮으며 하위 요소 z-index의 높이가 아무리 높아도 쓸모가 없습니다.

위의 stacking-level과 stacking-context을 이해하는 것이 CSS의 계단식 순서를 이해하는 열쇠입니다.

모든 주제는 내 Github에 요약되어 있으며 더 많은 교류가 있기를 바라며 블로그에 게시되었습니다.

아직 궁금한 점이나 제안사항이 있으면 더 많은 내용을 소통할 수 있습니다. 글의 내용이 제한되어 있고 잘못된 부분이 있으면 이 글을 마치겠습니다. 기사로 알려주세요.