一个 div 高于另一个 div 的阴影答案

【问题标题】：One div above shadow from another div一个 div 高于另一个 div 的阴影
【发布时间】：2016-01-09 14:58:43
【问题描述】：

假设我有这样的 html 代码：

<div class="container">
   <div class="navbar">Navbar</div>
   <div class="body">Body</div>
</div>

和 CSS：

.navbar {
    background-color: green;
    -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
}

.body {
    background-color: white;
}

但我看不到阴影，因为 body 位于导航栏上方。我该如何解决？

【问题讨论】：

使 .navbar z-index 大于 body-s
我制作了一个 JSBin 供人们使用。 jsbin.com/batelizuse/edit?html,css,output
这里能用吗？ jsfiddle.net/1e0vuff5
试试这个w3schools.com/css/css_positioning.asp

标签： html css

【解决方案1】：

将position: relative; 添加到.navbar

https://jsfiddle.net/mpn8r6e9/1/

【讨论】：

是的，这是最简单的方法。谢谢。

【解决方案2】：

http://jsfiddle.net/g3Lg7g1a/

你需要定位你的身体和导航。然后根据需要添加 z-index，在这种情况下，导航的 z-index 更大。

.navbar {
    background-color: green;
    -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    position: relative;
    z-index: 10;
}

.body {
    position: relative;
    z-index: 0;
    background-color: white;
}

【讨论】：

谢谢，它有效！是否可以只在底部创建阴影？
可惜左右都有阴影。我只想在底部。
谷歌它。目前这是一个不同的问题。前stackoverflow.com/questions/4561097/css-box-shadow-bottom-only

【解决方案3】：

您在.navbar 中添加重要信息，如下所示：

CSS

 .navbar
    {
    background-color: green !important;
    -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.75);
    }

【讨论】：