层叠堆叠并排_ccs如何看堆栈使用情况

编程小6 (3) 2024-08-18 09:23

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
层叠堆叠并排_ccs如何看堆栈使用情况,希望能够帮助你!!!。

interesting css之层叠顺序、堆栈上下文

层叠顺序（stacking level）与堆栈上下文（stacking context）

学习自: icss.

层叠顺序（stacking level）与堆栈上下文（stacking context）

拥有共同父容器的两个 DIV 重叠在一起，是 display:inline-block 叠在上面，还是 float:left 叠在上面？

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <div class="inline-block">#divA display:inline-block</div> <div class="float"> #divB float:left</div> </div> </body> <style> .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; } </style> </html>

效果

改变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 叠在上方。
原来是层叠水平（stacking level）

逻辑图

示例

在这个例子中，每个被定位的元素都创建了独自的层叠上下文，因为他们被指定了定位属性和 z-index 值。我们把层叠上下文的层级列在下面：

Root

DIV #1
DIV #2
DIV #3
- DIV #4
- DIV #5
- DIV #6
请一定要注意 DIV #4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素就被作为一个整体传递与兄弟元素的 DIV 在 root（根）元素进行层叠。

注意：

DIV #4 被渲染在 DIV #1 之下，因为 DIV #1 的 z-index (5) 在 root 元素的层叠上下文中生效，而 DIV
#4 的 z-index (6) 在 DIV #3 的层叠上下文中生效。因此，DIV #4 在 DIV #1 之下，因为 DIV #4 归属于 z-index 值较低的 DIV #3 元素。由此可得 DIV #2 (z-index 2) 被渲染在 DIV #5
(z-index 1) 之下，因为 DIV #5 归属于 z-index 较高的 DIV #3 元素。 DIV #3 的 z-index
值是 4，但是这个值独立于 DIV #4，DIV #5 和 DIV #6 的 z-index 值，因为他们从属于不同的层叠上下文。
分辨出层叠的元素在 Z
轴上的渲染顺序的一个简单方法是将它们想象成一系列的版本号，子元素是其父元素版本号之下的次要版本。通过这个方法我们可以轻松地看出为什么一个
z-index 为 1 的元素（DIV #5）层叠于一个 z-index 为 2 的元素（DIV #2）之上，而一个 z-index 为 6
的元素（DIV #4）层叠于 z-index 为 5 的元素（DIV #1）之下。在我们的例子中（依照最终渲染次序排列）： Root DIV
#2 - z-index 为 2 DIV #3 - z-index 为 4 DIV #5 - z-index 为 1，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.1 DIV #6 - z-index 为 3，在一个 z-index 为 4
的元素内层叠，所以渲染次序为 4.3 DIV #4 - z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为
4.6 DIV #1 - z-index 为 5

------------------------w3c层叠顺序------------------------------

w3c
形成堆叠上下文环境的元素的背景与边框
拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）
正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
无 position 定位（static除外）的 float 浮动元素
正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
拥有 z-index:0 的子堆叠上下文元素
拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

来个透明效果

添加的 opacity:0.9 这个让两个 div 都生成了 stacking context（堆叠上下文) 的概念。此时，要对两者进行层叠排列，就需要 z-index ，z-index 越高的层叠层级越高。
触发触发一个元素形成 堆叠上下文
摘自MDN.
1.根元素 (HTML),
2.z-index 值不为 "auto"的绝对/相对定位，
3.一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
4.opacity 属性值小于 1 的元素（参考 the specification for opacity），
5.transform 属性值不为 "none"的元素，
6.mix-blend-mode 属性值不为 "normal"的元素，
7.filter值不为“none”的元素，
8.perspective值不为“none”的元素，
9.isolation 属性被设置为 "isolate"的元素，
10.position: fixed
11.在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
12.-webkit-overflow-scrolling 属性被设置 "touch"的元素