层叠上下文

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

  1. 根元素(元素,初始的层叠上下文)
  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为正值的“内部元素”。

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

你可能感兴趣的:(前端,html,css)