Question

我正在创建带有SVG图像作为背景的标签式菜单。我需要标签以相反的顺序相互重叠 - 首先是第二个，第二个是第三个。我需要svg shadow才能在Firefox中工作。

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

＆＃13;

div{
    background-color: grey;
    padding-top:20px;
    padding-bottom: 20px;
}
ul.tabs-nav{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	margin-left: 10px;
	height: 40px;
	overflow: hidden;
}
ul.tabs-nav li{
	margin: 0px -38px 0px 0px;
	padding: 0px;
	display: block;
	float: left;
	text-decoration: none;
	filter: url("#drop-shadow");
}
ul.tabs-nav li a{
	background-color: #5d6c7a;
	text-decoration: none;
	height:40px;
	line-height: 40px;
	float:left;
	color: white;
	font-size: 14px;
	vertical-align: baseline;
	padding-left: 10px;
	padding-right: 10px;
}

ul.tabs-nav span.before{
	background-image: url("https://dl.dropboxusercontent.com/u/10056766/fiddle/tab_grey.svg");
    background-position: left top;
	display: block;
	float: left;
	height: 40px;
	width: 40px;
	position: relative;		
}

ul.tabs-nav span.after{
	background-image: url("https://dl.dropboxusercontent.com/u/10056766/fiddle/tab_grey.svg");
    background-position: right top;
	display: block;
	float: left;
	height: 40px;
	width: 40px;
	position: relative;
	z-index:1;
}

ul.tabs-nav li:first-child span.before{
	background-image: url("https://dl.dropboxusercontent.com/u/10056766/fiddle/tab_white.svg");
    background-position: left top;
	display: block;
	float: left;
	height: 40px;
	width: 40px;
	position: relative;		
}

ul.tabs-nav li:first-child span.after{
	background-image: url("https://dl.dropboxusercontent.com/u/10056766/fiddle/tab_white.svg");
    background-position: right top;
	display: block;
	float: left;
	height: 40px;
	width: 40px;
	position: relative;
	z-index:1;
}

ul.tabs-nav li:first-child a{
    background-color: white;
    color: black;
}

＆＃13;

<div>
<ul class="tabs-nav" style="padding: 0;">

	<li style="z-index: 10;" class="tab
	tabs-active
	"><span class="before"></span><a href="/foo.jsp" class="">User</a><span class="after"></span></li>
	<li style="z-index: 8;" class="tab
	"><span class="before"></span><a href="/foo.jsp" class="">Developer</a><span class="after"></span></li>
	<li class="tab
	"><span class="before"></span><a href="/foo.jsp" class="">Users</a><span class="after"></span></li>
	<li class="tab
	"><span class="before"></span><a href="/foo.jsp" class="">Roles</a><span class="after"></span></li>
	<li class="tab
	"><span class="before"></span><a href="/foo.jsp" class="">Attributes</a><span class="after"></span></li>
	<li class="tab
	"><span class="before"></span><a href="/foo.jsp" class="">Screens</a><span class="after"></span></li>
	<li class="tab
	"><span class="before"></span><a href="/foo.jsp" class="">Locales</a><span class="after"></span></li>
	<li class="tab
	"><span class="before"></span><a href="/foo.jsp" class="">Providers</a><span class="after"></span></li>
	</ul>
    
</div>

<svg height="0" xmlns="http://www.w3.org/2000/svg">

<filter id="drop-shadow">

<feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>

<feOffset dx="12" dy="2" result="offsetblur"/>

<feFlood flood-color="rgba(0,0,0,0.2)"/>

<feComposite in2="offsetblur" operator="in"/>

<feMerge>

<feMergeNode/>

<feMergeNode in="SourceGraphic"/>

</feMerge>

</filter>

</svg>

＆＃13;

http://jsfiddle.net/mark_bacon/5vnefef5/3/

关闭li元素的过滤器，你会看到它应该是什么样的。

Answer 1

filter属性会创建CSS stacking context。这意味着任何子元素上的z-index属性将仅控制子内容之间的堆叠方式，而不是相对于页面上其他元素的堆叠方式。

您正在将filter应用于li个元素，但是您正在将z-index应用于子跨度。这会将这些跨度提升到li中其他内容之上，但列表元素中的所有内容将在与页面的其余部分堆叠之前展平为一个层。由于您未在z-index本身设置li值，因此默认堆叠顺序适用。换句话说，文档中稍后的元素将被覆盖在顶部。

在这个例子中你有很多事情发生，但我很确定你可以通过在z-index:1本身上设置li:first-child来获得你想要的效果。

Firefox中的SVG过滤器会破坏z-index

1 个答案: