css - ul 和 child 的 z-index 优先级

Question

基本上我想要一个相对元素在 z 计划中隐藏它的绝对子元素。

ul {z-index:10; position:relative;}
ul ul {z-index:-10; position:absolute;} 

它们被定位在彼此之上。第一个应该隐藏它的孩子，但它不是那样发生的。

见小提琴。我试着让红色部分消失在蓝色部分下面。

任何帮助都非常感谢

谢谢

Answer 1

您尝试做的特定事情无法完成。通过z-index在父 ul 上设置 a，您可以使该元素成为新的堆叠上下文，根据规范，这意味着它的背景和边框将始终位于其所有子元素的下方。

z-index如果您从父 ul 中删除设置，您想要的效果可能仍然可以实现。这并不意味着您必须调整页面中其余的 z-index 来进行补偿；您所要做的就是提供另一个元素作为上下文 - 例如，父 ul 的父元素。要使该元素成为堆叠上下文，您只需给它一个 z-index 值 - 任何 z-index 值，只要它是一个数字。