Html 对具有不同z索引的嵌套组件使用混合混合模式

我有一个使用嵌套绝对定位div的设置，我需要

混合混合模式

将div的元素与z索引低于该div的所有元素混合

需要注意的是，每个div必须有自己独立的z索引（由于可访问性的原因不能更改）

用一个例子更容易解释这一点：

#第1层{
宽度：700px；
高度：700px；
位置：绝对位置；
背景颜色：栗色；
z指数：1；
}
#第二层{
位置：绝对位置；
高度：100px；
宽度：200px；
z指数：2；
}
#第三层{
位置：绝对位置；
z指数：3；
混合模式：变暗；
}
#第三层img{
宽度：300px；
}

---

只需将

混合模式

应用于div

#第2层

。这一层与

#layer-1

位于同一堆叠上下文中<代码>#第3层或

img

不能直接与

#第1层

#第1层{
宽度：700px；
高度：700px；
位置：绝对位置；
背景颜色：栗色；
z指数：1；
}
#第二层{
位置：绝对位置；
高度：100px；
宽度：200px；
z指数：2；
混合模式：变暗；
}
#第三层{
位置：绝对位置；
z指数：3；
}
#第三层img{
宽度：300px；
}

显示：内容

到

#layer-2

我很感谢您的回复，但这也会将

混合混合模式

添加到

#layer-2

中不应具有混合模式的其他层中-抱歉，我应该将其包括在我的example@gabranches在这种情况下，如果继续使用z-index，就不可能了。如果创建了堆叠上下文，则该堆叠上下文上不能只有某些元素与外部元素混合。要么所有堆叠上下文都可以混合，要么不混合。@gabranches顺便说一句，我很确定我们可以克服z索引，如果您在认为必要的地方共享完整的代码，就不要使用它