层叠上下文

2024-01-03 00:32:11

层叠上下文（Stacking Context）是HTML中的一个三维概念，它影响着元素的堆叠顺序和显示效果。如果一个元素具备以下任何一个条件，就会创建一个新的层叠上下文：

  1. 根元素（<html>元素，初始的层叠上下文）
  2. 使用定位属性：将元素的定位属性设置为相对定位（position:relative）、绝对定位（position:absolute）或固定定位（position:fixed），这样可以创建新的层叠上下文。
  3. 使用浮动属性：将元素的浮动属性设置为float:left或float:right，也可以创建新的层叠上下文。
  4. 使用透明度属性：将元素的透明度设置为小于1的值，也可以创建新的层叠上下文。

层叠上下文的特性包括：

  1. 层叠上下文的层叠水平要比普通元素高。
  2. 层叠上下文可以阻断元素的混合模式。
  3. 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
  4. 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
  5. 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

在同一个层叠上下文中，元素的堆叠顺序由层叠级别决定，层叠级别从低到高排列如下：

  1. 边框和背景：也就是当前层叠上下文的边框和背景。
  2. 负z-index：z-index为负值的“内部元素”。
  3. 行内盒子：普通文档流下的行内盒子。
  4. 正z-index：z-index为正值的“内部元素”。

在同一层叠上下文中，如果两个元素的层叠级别相同，则后面的元素在前面的元素的上面，遵循后来者居上的原则。在不同的层叠上下文中，我们比较的是“父级元素层叠级别”。

文章来源:https://blog.csdn.net/array__/article/details/135339259
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。