html - 一个 div 位于另一个 div 的阴影上方

假设我有这样的 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 在导航栏上方。我该如何解决？

最佳答案

http://jsfiddle.net/g3Lg7g1a/

你需要定位你的 body 和导航。然后根据需要添加 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;
}

关于html - 一个 div 位于另一个 div 的阴影上方，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33075905/