html - 如何在不重叠两个 div 的情况下将 1 div 的框阴影放在另一个 div 之上？

Question

我在尝试获得所需结果时遇到了很多麻烦。我有一个网页，顶部有一个导航栏 div ，下面有一个用于正文的 div 。每个都有一些 box-shadow，导航栏只显示在它下面，正文 div 就在两侧。我希望正文 div 恰好在导航栏 div 结束的位置开始，并显示在导航栏 的 box-shadow 下分区。

JSFiddle 似乎没有正确地重现这个问题，所以我将在下面包含图片和代码(代码的格式可能很糟糕)。

---

HTML

<div class="navbar">
    <ul>
        <li><a href="Index.html" style="background-color:#C6CFD6;">Home</a></li>
        <li><a href="Education.html">Education</a></li>
        <li><a href="Experience.html">Experience</a></li>
        <li><a href="Mywork.html">My Work</a></li>
        <li><a href="Contact.html">Contact Me</a></li>
    </ul>
</div>
<div class="body">
    <div class="bodytext">
        <h1>test text</h1>
        <p>test text</p>
        <p>test text</p>
        <br>
        <br>
        <br>
        <h1>test text</h1>
    </div>
</div>

CSS

html, body {
    height: 100%;
}

.navbar {
    width: 100%;
    text-align: center;
    z-index: 1;
    box-shadow: 0px 0px 10px 10px black;
    /*position: absolute;*/
    padding: 0;
    margin: 0;
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #E7E7EF;
    padding: 10px;
    width: 100%;
}

.navbar ul li {
    display: inline;
    text-align: center;
    padding: 10px;
    margin: 0;
    padding: 0;
    position: relative;
}

.navbar ul li a {
    padding: 10px;
    background: #E7E7EF;
    text-decoration: none;
    color: #CE0000;
    font-size: 2em;
    display: inline;
    cursor: pointer;
}

.navbar ul li a:hover {
    background-color: #C6CFD6;
}

.body {
    background-color: #C6CFD6;
    width: 70%;
    z-index: -1;
    text-align: center;
    display: block;
    margin: auto;
    box-shadow: 0px 0px 10px 10px black;
    margin-top: 0;
    padding-top: 0;
}

图片

Imgur

---

这篇文章可能不是最清晰的措辞或格式 - 我尝试制作一个 JSFiddle，但它没有反射(reflect)我网页中发生的事情；我试着澄清任何不清楚的地方。关于我可以做些什么来获得我想要的结果有什么想法吗？

Answer 1

如果这对您有帮助，请告诉我。

HTML:

<div class="navbar">
    <ul>
        <li><a href="Index.html" style="background-color:#C6CFD6;">Home</a></li>
        <li><a href="Education.html">Education</a></li>
        <li><a href="Experience.html">Experience</a></li>
        <li><a href="Mywork.html">My Work</a></li>
        <li><a href="Contact.html">Contact Me</a></li>
    </ul>
</div>
<div class="body">
    <div class="bodytext">
        <h1>test text</h1>
        <p>test text</p>
        <p>test text</p>
        <br>
        <br>
        <br>
        <h1>test text</h1>
    </div>
</div>

CSS:

html, body {
    height: 100%;
}

h1 {
  margin: 0;
}

.body {
  position: relative;
  z-index: -1;
  background: green;
  box-shadow: 0px 0px 10px 0px black;
}

.navbar {
    width: 100%;
    text-align: center;
    box-shadow: 0px 0px 10px 0px black;
    padding: 0;
    margin: 0;
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #E7E7EF;
    padding: 10px;
    width: 100%;
}

.navbar ul li {
    display: inline;
    text-align: center;
    padding: 10px;
    margin: 0;
    padding: 0;
    position: relative;
}

.navbar ul li a {
    padding: 10px;
    background: #E7E7EF;
    text-decoration: none;
    color: #CE0000;
}

My Fiddle