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

但是我无法看到阴影，因为正文在导航栏之上。我该怎么解决这个问题？

- Nominalista

---

使 .navbar 的 z-index 大于 body-s - guramidev

我为大家制作了一个JSBin，可以随意玩耍。https://jsbin.com/batelizuse/edit?html,css,output - cwiggo

这里能用吗？http://jsfiddle.net/1e0vuff5/ - guramidev

尝试访问此链接：http://www.w3schools.com/css/css_positioning.asp - Muddasir Abbas

Answer 1

在 .navbar 中添加 position: relative;

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

- FrontDev

---

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

Answer 2

您需要定位主体和导航。然后根据您的需求添加z-index，本例中导航使用更大的z-index。

http://jsfiddle.net/g3Lg7g1a/

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

- Paran0a

---

谢谢，它有效！是否可能仅在底部创建阴影？ - Nominalista

但是左右两侧也有阴影，不幸的是。我只想要底部有阴影。 - Nominalista

谷歌一下。那是一个不同的问题。例如，https://dev59.com/SW455IYBdhLWcg3wD_2Z - Paran0a

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

- Waleed Ahmed