CSS 如何使用 z-index 对 box-shadow 进行分层？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23067651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to layer box-shadows using z-index?
提问by mpen
#b {
background: orange;
box-shadow: 0 0 10px black;
z-index: 2;
position: relative;
}
#c {
background: red;
z-index: 1;
position: relative;
}
ul {
list-style: none;
margin: 0;
padding: 0;
z-index: 1;
position: relative;
}
li {
display: inline-block;
padding: 2px 5px;
}
.current {
background-color: orange;
z-index: 3;
position: relative;
}
#d {
box-shadow: 0 0 10px black;
z-index: 2;
}<div id="a">
<div id="b">bbb</div>
<div id="c">
<ul>
<li>a</li>
<li class="current">b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
</div>
<div id="d">dddd
</div>Take a look at the code pen. I've got the layers more or less how I want it, except I want the "b" tab to be above the box-shadow caused by the orange div above.
看一下代码笔。我或多或少地得到了我想要的图层，除了我希望“b”选项卡位于由上面的橙色 div 引起的框阴影上方。
To elaborate, the orange #bdiv should cast a shadow on the red #cdiv, the .currenttab should appear flush with the orange #bdiv (have no shadow on it), and #dshould notcast a shadow on #cat all.
详细说明，橙色#bdiv 应该在红色#cdiv上投下阴影，.current选项卡应该与橙色#bdiv齐平（上面没有阴影），并且#d根本不应该投下阴影#c。
The problem is that the z-indexon .currentdoesn't seem to work.
问题是z-indexon.current似乎不起作用。
回答by FreeStateNH
If you're using z-index, make sure the element has a defined position attribute or it won't work. Wherever you use z-index in your css, define the position of that element. (Absolute, relative, inherit...)
如果您使用 z-index，请确保该元素具有已定义的位置属性，否则将无法工作。无论您在 css 中的何处使用 z-index，都要定义该元素的位置。（绝对、相对、继承……）
回答by Arbel
Demo:http://codepen.io/anon/pen/vLgKC
演示：http : //codepen.io/anon/pen/vLgKC
For more info on z-indexand stacking context and the priorities please see my answer here.
有关z-index堆叠上下文和优先级的更多信息，请在此处查看我的回答。
The above, combined with the insetfor box-shadow
以上，结合insetforbox-shadow
inset
If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.
插图
如果未指定（默认），则假定阴影为阴影（就像框被提升到内容上方一样）。inset 关键字的存在将阴影更改为框架内的阴影（就像内容被压在框内一样）。插入阴影绘制在边框内（甚至是透明的），在背景之上，但在内容之下。
And a negative spread
而一个 negative spread
spread-radius
This is a fourth value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
传播半径
这是第四个值。正值会导致阴影扩大变大，负值会导致阴影缩小。如果未指定，它将为 0（阴影将与元素大小相同）。
(Both here)
（两者都在这里）
Will give you the effect that you are looking for.
会给你你正在寻找的效果。
So you will need to change the place that the shadows are applied on elements.
因此，您需要更改阴影应用于元素的位置。
So the final CSS:
所以最终的CSS：
#b {
background: orange;
z-index: 2;
position: relative;
}
#c {
background: red;
-webkit-box-shadow: inset 0 10px 10px -10px black;
-moz-box-shadow: inset 0 10px 10px -10px black;
box-shadow: inset 0 10px 10px -10px black;
z-index: 1;
position: relative;
}
ul {
list-style: none;
margin: 0;
padding: 0;
z-index: 1;
position: relative;
}
li {
display: inline-block;
padding: 2px 5px;
}
.current {
background-color: orange;
z-index: 3;
position: relative;
}
#d {
box-shadow: 0 0 10px black;
z-index: 2;
}<div id="a">
<div id="b">bbb</div>
<div id="c">
<ul>
<li>a</li>
<li class="current">b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
</div>
<div id="d">dddd
</div>回答by sunpietro
Try using inset box-shadow on list elements and when a selected element has class .currentthen remove the inset shadow from it.
尝试在列表元素上使用 inset box-shadow ，当所选元素具有 class 时，.current然后从中删除 inset shadow。
