Css Firefox中的SVG过滤器打破了z索引

我正在创建以SVG图像为背景的选项卡式菜单。我需要标签以相反的顺序相互重叠-第一对第二，第二对第三。我需要svg阴影，在Firefox中工作

但是，当我应用阴影时，.after元素的z索引被破坏，这会破坏重叠。有没有办法改变堆放顺序/解决这个问题？ 以下是样本来源：

div{
背景颜色：灰色；
填充顶部：20px；
垫底：20px；
}
ul.tabs-nav{
边际：0px；
填充：0px；
列表样式类型：无；
左边距：10px；
高度：40px；
溢出：隐藏；
}
ul.tabs-nav-li{
利润率：0px-38px 0px 0px；
填充：0px；
显示：块；
浮动：左；
文字装饰：无；
过滤器：url（“#阴影”）；
}
ul.tabs-nav li a{
背景色：5d6c7a；
文字装饰：无；
高度：40px；
线高：40px；
浮动：左；
颜色：白色；
字体大小：14px；
垂直对齐：基线；
左侧填充：10px；
右边填充：10px；
}
ul.tabs-nav跨度{
背景图像：url（“https://dl.dropboxusercontent.com/u/10056766/fiddle/tab_grey.svg");
背景位置：左上；
显示：块；
浮动：左；
高度：40px；
宽度：40px；
位置：相对位置；
}
ul.tabs-nav跨度后{
背景图像：url（“https://dl.dropboxusercontent.com/u/10056766/fiddle/tab_grey.svg");
背景位置：右上角；
显示：块；
浮动：左；
高度：40px；
宽度：40px；
位置：相对位置；
z指数：1；
}
ul.tabs-nav li：之前的第一个孩子{
背景图像：url（“https://dl.dropboxusercontent.com/u/10056766/fiddle/tab_white.svg");
背景位置：左上；
显示：块；
浮动：左；
高度：40px；
宽度：40px；
位置：相对位置；
}
ul.tabs-nav li：出生后第一个孩子{
背景图像：url（“https://dl.dropboxusercontent.com/u/10056766/fiddle/tab_white.svg");
背景位置：右上角；
显示：块；
浮动：左；
高度：40px；
宽度：40px；
位置：相对位置；
z指数：1；
}
ul.tabs-nav li：第一个孩子a{
背景色：白色；
颜色：黑色；
}

过滤器属性创建一个。这意味着任何子元素上的

z-index

属性将仅控制子内容彼此之间的堆叠方式，而不是它们相对于页面上其他元素的堆叠方式

您正在将

filter

应用于

li

元素，但您正在将

z-index

应用于子跨度。这将使这些跨距高于

li

中的其他内容，但列表元素中的所有内容将被展平为一层，然后与页面的其余部分堆叠在一起。由于您没有在

li

本身上设置

z-index

值，因此默认的堆叠顺序适用。换句话说，文档中稍后的元素会被绘制到顶部

---

在这个例子中，你有很多事情要做，但是我很确定你可以通过在

li:first child

本身上设置

z-index:1

来获得你想要的效果。

过滤器属性创建一个。这意味着任何子元素上的

z-index

属性将仅控制子内容彼此之间的堆叠方式，而不是它们相对于页面上其他元素的堆叠方式

您正在将

filter

应用于

li

元素，但您正在将

z-index

应用于子跨度。这将使这些跨距高于

li

中的其他内容，但列表元素中的所有内容将被展平为一层，然后与页面的其余部分堆叠在一起。由于您没有在

li

本身上设置

z-index

值，因此默认的堆叠顺序适用。换句话说，文档中稍后的元素会被绘制到顶部

---

在这个例子中，你有很多事情要做，但是我很确定你可以通过在

li:first child

本身上设置

z-index:1

来获得你想要的效果。

谢谢你的解释。我在堆叠顺序中迷路了。但我添加了位置：相对于每个li元素，并从头到尾减少选项卡的z索引值。现在一切都很好，你好，阿米莉亚。这个答案我读了很多遍，在读之前我就知道了，但我仍然不知道为什么我的网站上的元素不起作用。我真的很抱歉在评论中问这些问题，但你是我最后的希望：）-这是一支笔，在我的第一页上。向下滚动白色圆圈，位置固定，其父元素带有SVG过滤器（粘性效果）。在Chrome/IE中，一切都非常完美，但在FF中，这个元素是不可见的。我尝试了所有的方法，所有可能的z指数组合。可以在FF中修复此问题吗？：（1）如果内部带有过滤器定义的SVG在FF中具有display:none，则应用此过滤器的元素的子元素在任何情况下都不可见。但你可以点击它，就像他的z指数是确定的。2） 无论您如何努力，都无法看到元素并与之交互，元素的位置是：Firefox中应用了svg过滤器的固定内部元素：（@NikolayTalanov Firefox过去遇到过问题，

display:none

会干扰重复使用内容。可能过滤器仍然有问题。也许可以尝试CSS绝对定位来隐藏您的定义SVG，看看这是否是问题所在？更一般地说，任何浏览器，如果过滤器上出现错误，形状都会变为替换为透明区域，这是您看到的。但是，指针事件单击区域不受影响