Html 如何让 box-shadow 出现在 div 上方？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9199433/
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 can I make box-shadow appear above a div?
提问by Vecta
Hereis an example of what I'm trying to accomplish.
这是我试图完成的一个例子。
The box-shadowfrom the upper divwon't appear on top of the divbelow it. From what I understand, I need to set the z-indexso it will appear on top and that only works on elements with position: relative;but it's still not appearing.
在box-shadow从上div就不会出现顶部div下方。据我了解，我需要设置z-index以便它会出现在顶部，并且只适用于元素，position: relative;但它仍然没有出现。
What am I doing wrong?
我究竟做错了什么？
#top {
width: 100%;
height: 100px;
box-shadow: 3px 3px 3px #333;
background-color: blue;
}
#middle {
width: 100%;
height: 200px;
z-index: 0;
position: relative;
background-color: orange;
}
#innerMiddle {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: green;
}<div id="top">
</div>
<div id="middle">
<div id="innerMiddle">
</div>
</div>回答by thirtydot
It's #topand its box-shadowthat you want to appear on top, so give that position: relativeinstead of giving position: relativeto #middle. There's no need for z-index: 0.
这是#top和它box-shadow要出现在顶部，所以要让position: relative而不是给position: relative到#middle。没有必要z-index: 0。
回答by Sagar Patil
Change your CSS to:
将您的 CSS 更改为：
#top {
width: 100%;
height: 100px;
box-shadow: 3px 3px 3px #333;
background-color: blue;
position:relative;
z-index:1;
}
#middle {
width: 100%;
height: 200px;
z-index: 0;
position: relative;
background-color: orange;
}
