CSS中影响层叠效果的属性有哪些

除了 z-index 属性以外，CSS 中还有一些其他的属性可以用来控制层叠顺序，包括：

1. position 属性：元素的定位方式可以影响其在层叠顺序中的位置。在默认情况下，静态定位的元素位于层叠顺序的底部，而绝对定位、固定定位和相对定位的元素位于层叠顺序的顶部。

2. opacity 属性：元素的透明度可以影响其在层叠顺序中的位置。透明度较低的元素通常会被放置在透明度较高的元素的上方。

3. mix-blend-mode 属性：该属性用于指定元素的混合模式，可以影响元素在层叠顺序中的位置。具有较高混合模式的元素通常会被放置在具有较低混合模式的元素的上方。

4. background-clip 属性：该属性用于指定元素的背景剪辑区域，可以影响元素在层叠顺序中的位置。如果元素的背景剪辑区域为 content-box，则它将放置在具有相同层叠顺序的元素的上方；如果元素的背景剪辑区域为 border-box，则它将放置在具有不同层叠顺序的元素的上方。

5. filter 属性：该属性用于指定元素的滤镜效果，可以影响元素在层叠顺序中的位置。具有较高滤镜效果的元素通常会被放置在具有较低滤镜效果的元素的上方。

这些属性虽然不是专门用于控制层叠顺序的，但它们可以对元素的层叠顺序产生影响。在实际应用中，我们可以根据具体情况选择不同的属性来控制元素的层叠顺序。

z-index与绝对定位

在拥有绝对定位的元素和 z-index 属性之间，z-index属性的优先级更高。
如果两个元素的 z-index 属性值相同，则它们的层叠顺序将由它们在 HTML 中的位置决定，后面的元素将被放置在前面的元素的上方。