Html 为什么导航'；s盒阴影不是'；你不来吗？

我希望标题的导航有一个框阴影。然而，盒子的阴影似乎被我放在它下面的旋转木马所隐藏。我对#carousel的所有子对象进行了z索引，但框阴影仍然没有显示出来

（页面片段）

下面是当我将旋转木马向下推时发生的情况，当我给它最大的余量：40px

（另一页片段）

HTML

<header>

                <nav>

                    <div class="container">

                        <h1><a href="#"><img src="images/logo.png" alt="" id="logo"></a></h1>
                        <h1 id="NHS"><a href="#">Newport High School</a></h1>

                        <ul id="nav">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Students</a></li>
                            <li><a href="#">Parents</a></li>
                            <li><a href="#">Activities & Atletics</a></li>
                            <li><a href="#">Resources</a></li>
                        </ul>

                    </div><!--container---> 

                </nav>

            </header><div id="carousel">                        
                <div class="inner">
                    <ul>
                        <li><img src="images/example-slide-1.jpg" alt="Fish"></li>
                        <li><img src="images/example-slide-2.jpg" alt="Elephant"></li>
                        <li><img src="images/example-slide-3.jpg" alt="Giraffe"></li>
                        <li><img src="images/example-slide-4.jpg" alt="Fish"></li>
                    </ul>
                </div>                                      
            </div>

---

尝试添加！对你的暗影盒很重要。我认为这应该行得通

box-shadow:           0px 3px 15px rgba(50, 50, 50, .7) !important;
    -webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
    -moz-box-shadow:    0px 3px 15px rgba(50, 50, 50, .7) !important;

---

请记住

z-index

仅适用于定位元素。因此，您的旋转木马和标头都需要有一个

位置

值，而不是

静态

，然后您可以为标头指定一个更高的

z索引

。这样，

框阴影

将正确显示在旋转木马上方。

您只需将

位置：相对

添加到标题。旋转木马不需要进行

z-index

更改。

尝试添加

位置：相对至
标题
。没有这个
z-index
就无法工作。
box-shadow:           0px 3px 15px rgba(50, 50, 50, .7) !important;
    -webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
    -moz-box-shadow:    0px 3px 15px rgba(50, 50, 50, .7) !important;