css中层叠上下文_css堆叠上下文-CSDN博客

本文链接：https://blog.csdn.net/m0_62799628/article/details/134287600

一、z-index属性作用是什么?

z-index属性是用于控制网页元素在垂直方向上的层叠顺序。默认情况下，HTML元素是按照其在HTML代码中的顺序堆叠起来，后面的元素会覆盖住前面的元素。但是通过设置z-index属性，可以改变元素的层叠顺序，让某个元素在垂直方向上覆盖其他元素。

z-index属性的值为整数或auto。数值越大的元素在层叠上越靠上，覆盖数值较小的元素。如果两个元素的层叠顺序相同，则HTML代码中后面出现的元素会覆盖前面的元素。当z-index值为auto时，元素的层叠顺序由其所属父元素及同级元素的综合判断得出。

二、z-index生效的条件是什么?

1、定位属性：只有相对定位（relative）、绝对定位（absolute）和固定定位（fixed）的元素才能使用z-index属性。这是因为只有定位属性的元素才能在文档流中脱离普通的布局，并且参与层叠上下文的形成。

2、同级元素：z-index属性只对同级元素之间的层叠顺序生效。也就是说，兄弟元素之间可以通过z-index来控制层叠顺序，而在不同父级元素中的元素之间的层叠顺序与z-index无关。

3、层叠上下文：使用z-index属性要考虑元素所处的层叠上下文。层叠上下文是由某个元素及其后代元素共同组成的一个层叠环境，在该环境中，元素的层叠顺序是相互￥￥的。每个层叠上下文都有一个层叠上下文根，一般默认为HTML根元素。当元素创建堆叠上下文时，它会在此上下文中根据z-index值确定层叠顺序。

4、z-index值：z-index属性的值越大，元素在层叠上下文中的层叠顺序就越高，覆盖低值的元素。负数值也是有效的，但需要注意的是负数值的层叠顺序要小于默认的0值。

三、z-index: 100一定在z-index: 之上嘛? z-index会被什么因素影响?

z-index: 100并不一定在z-index: 之上。这是因为z-index的值是基于当前所有具有position属性为relative、absolute、fixed或sticky的元素的堆叠顺序来计算的。也就是说，具有更高z-index值的元素将覆盖堆叠顺序更低的元素。

一些因素也会影响元素的z-index值，包括：

1、元素的position属性：如果两个元素都有相同的z-index值，那么具有position属性为relative、absolute、fixed或sticky的元素将覆盖其他元素。

2、元素的堆叠顺序：如果两个元素具有相同的position属性，那么在视觉上更接近视口的元素将具有更高的z-index值。

3、上下文：某些特定的上下文（如浏览器窗口的边缘）可能会影响到元素的堆叠顺序。

注意：使用高z-index值的元素可能需要配合相应的定位技术（如position: relative, position: absolute, position: fixed, 或 position: sticky）才能正确工作。如果元素没有这些定位技术，它可能仍然会被覆盖在堆叠顺序更低的元素之上，即使它的z-index值更高。

四、为什么会形成层叠上下文? 什么情况下会形成层叠上下文?

层叠上下文是指在 HTML 文档中元素之间形成的一种层级结构，它决定了元素如何堆叠、覆盖和显示。层叠上下文的形成主要由以下几个因素决定：

根元素：整个文档的根元素，即 <html> 元素，会形成一个层叠上下文。position 属性为以下值之一的元素：position: relative、position: absolute、position: fixed、position: sticky

z-index 属性：当元素设置了非 auto 的 z-index 值时，即可形成一个层叠上下文。

flex 和 grid 容器的子元素：若某个元素是 flex 或 grid 容器的直接子元素，并且该元素的 z-index 值不是 auto，则该元素会形成层叠上下文。

opacity 属性小于 1 的元素。

transform 变换属性不是 none 的元素。

filter 不是 none 的元素。

还有一些其他情况也可能会形成层叠上下文，但以上是最常见的情况。

层叠上下文的层叠顺序是怎么样的?

层叠上下文中的层叠顺序按照以下规则确定：

1、元素自身的层叠水平：具有较高层叠水平的元素将覆盖具有较低层叠水平的元素。例如，z-index属性可以用来调整元素的层叠顺序。

2、文档树顺序：如果两个具有相同层叠水平的元素发生重叠，后面出现在HTML代码中的元素将覆盖前面的元素。

3、父元素和子元素：父元素的层叠顺序优于子元素。具有较高层叠水平的父元素将覆盖具有较低层叠水平的子元素。

4、同一层级的兄弟元素：如果两个具有相同层叠水平的兄弟元素发生重叠，后面出现在HTML代码中的元素将覆盖前面的元素。

5、以上是一般情况下确定层叠顺序的规则，但具体实现还受到浏览器的支持程度及各种CSS属性的影响。

六、z-index生效的条件是什么?

1、元素的定位方式：只有设置了定位方式的元素（例如position: relative;, position: absolute;, position: fixed; 或 position: sticky;）才能使用z-index。如果没有定位方式，元素将不会出现在正常的文档流中，也就无法应用z-index。

2、元素的层叠顺序：在具有相同z-index值的元素中，离观察者近的元素将显示在前面。如果没有提供z-index值，那么元素的默认层叠顺序将是相对于其最近的包含块（最近的定位祖先元素或者如果没有则相对于初始包含块）。

3、z-index的上下文：如果一个元素被另一个元素覆盖，那么只有覆盖它的元素的z-index才会影响堆叠顺序。如果元素没有被覆盖，那么其自身的z-index不会对其后面的任何元素产生影响。

4、全局z-index上下文：在某些情况下，如使用Flexbox或Grid布局时，整个文档可能成为一个全局的z-index上下文。这种情况下，元素的z-index将不会受到其他元素的限制。