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

Question

我们说我有这样的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;
}

但是我看不到阴影，因为身体在导航栏上方。我该如何解决这个问题？

Answer 1

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;
}

Answer 2

将position: relative;添加到.navbar

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

Answer 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);
    }