CSS 스택 순서 및 스택 컨텍스트에 대한 자세한 소개

호환성을 고려하지 않고 문제를 해결하세요. 문제 해결에서 익숙하지 않은 CSS 속성이 있으면 무엇이든 말해보세요. 🎜>, 서둘러서 알아보세요.

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

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

<a href="http://www.php.cn/wiki/903.html" target="_blank">z-색인<p style="text-align: left;"> code>는 매우 단순한 것 같지만, 계단식 <span style="font-size: 14px; font-family: verdana, geneva;"> 우선순위 <code><a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a>는 z-index의 레벨에 따라 결정됩니다. 사실 더 깊이 들어가 보면 그 안에 뭔가가 숨겨져 있다는 것을 알 수 있습니다.

다음 질문을 보고 동일한 상위

태그 아래에 포함된 두 개의 A와 B를 정의하세요. HTML 구조는 다음과 같습니다. pp

<p>
    </p><p>#pA display:inline-block</p>
    <p> #pB float:left</p>

그들의

은 다음과 같이 정의됩니다. CSS

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

대략 설명하면 다음과 같은 두 개의 개체를 의미합니다. 공통 상위 컨테이너 p가 겹칠 때

를 맨 위에 쌓아야 할까요, 아니면 을 맨 위에 쌓아야 할까요? display:inline-blockfloat:left

여기서 DOM의 순서는

을 먼저 생성한 다음 을 생성하는 것입니다. 물론 display:inline-blockfloat:left

<p>
    </p><p> #pB float:left</p>
    <p>#pA display:inline-block</p>

와 같이 두 DOM의 순서를 바꿀 수도 있습니다. 순서에 관계없이

과 가 항상 겹쳐져 있음을 알 수 있습니다. 맨 위. display:inline-blockp

이것은 실제로 소위 스태킹 수준과 관련이 있습니다. 이를 잘 설명할 수 있는 그림이 있습니다.

위 그림의 논리를 사용하면 위의 문제는

의 가 inline-blcok보다 높으므로 DOM의 순서에 관계없이 쉽게 해결할 수 있습니다. 위에 쌓여있습니다. stacking levelfloat

그러나 위의 그림은 다소 부정확합니다. W3 관계자에 따르면 정확한 7개 레이어는 다음과 같습니다.

1. 스태킹 컨텍스트를 형성하는 요소의 배경과 테두리.

2. 음수 스택 레벨을 갖는 하위 스태킹 컨텍스트(가장 음수 먼저)

3. 유입, 비인라인 수준, 위치 지정되지 않은 하위 항목.

4. 위치 지정되지 않은 하위 항목 float.

5. 인라인 테이블 및 인라인 블록을 포함하여 인플로우, 인라인 수준, 위치 지정되지 않은 하위 항목.

6. 스택 레벨 0의 하위 스태킹 컨텍스트와 스택 레벨 0의 위치 지정 하위 항목.

7. 포지티브의 하위 스태킹 컨텍스트 스택 수준(최소 양수부터).

약간의 번역:

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: 的子堆叠上下文元素（正的越低越堆叠层级越低）

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

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

.container{
    position:relative;
    background:#ddd;
}
.container > p{
    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;
}

Demo戳我。

会看到，inline-block 的 p 不再一定叠在 float 的 p 之上，而是和 HTML 代码中 DOM 的堆放顺序有关，后添加的 p 会 叠在先添加的 p 之上。

这里的关键点在于，添加的 opacity:0.9 这个让两个 p 都生成了 stacking context（堆叠上下文） 的概念。此时，要对两者进行层叠排列，就需要 z-index ，z-index 越高的层叠层级越高。

堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

那么，如何触发一个元素形成 堆叠上下文 ？方法如下，摘自 MDN：

• 根元素 (HTML),

• z-index 值不为 "auto"的 绝对/相对定位，

• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，

• opacity 属性值小于 1 的元素（参考 the specification for opacity），

• transform 属性值不为 "none"的元素，

• mix-blend-mode 属性值不为 "normal"的元素，

• 필터 값이 "none"이 아닌 요소,

• perspective 값이 "none"이 아닌 요소,

• 격리 속성이 "격리"로 설정된 요소,

• 위치: 고정

• 이러한 속성의 값을 직접 지정하지 않더라도 will-change에서 CSS 속성을 지정하세요.

• -webkit-overflow-속성이 "touch"로 설정된 스크롤 요소

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

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

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

위 내용은 CSS 스택 순서 및 스택 컨텍스트에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!