为什么导航的框阴影没有显示？

Question

我想让标题的导航有一个盒子阴影。然而，盒子阴影似乎被我放在它下面的旋转木马隐藏了。我放置了 #carousel 的所有子项的 z-index，但 box-shadow 仍然没有出现。

（页面 sn-p）

当我将 #carousel 向下推时，我将其设置为 margin-top: 40px;

（另一页sn-p）

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>

CSS

/* - - - header - - - */

header {
    background: rgb(30,27,27); /* Old browsers */

    background: -moz-linear-gradient(top,  rgba(30,27,27,1) 0%, rgba(2,2,2,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,27,27,1)), color-stop(100%,rgba(2,2,2,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%);  


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

    z-index: 1000;

} 

    header h1, header li {
        float: left;
    }

    header a {
        color: #A1A1A1 ;
        font-family: arial, helvetica, verana, sans-serif;
    }

        header a:hover {
            color: #A1A1A1;
            text-decoration: none;
        }

#logo {
    width: 50px;
}

#NHS {
    margin: 1.8% 0 0 2%;
    font-size: 1.2em;
    text-transform: uppercase;
}

    #NHS a {
        color: #F6F6F6;
        letter-spacing: 2px;
    }

#nav {
    float: right;
    margin: 3% 0 0 0;

}

    #nav li {
        margin-right: 20px;
        padding: 0;
    }

    #nav li:last-of-type {
        margin-right: 0px;
    }

        #nav a {
         font-size: .8em;
         text-transform: uppercase;
         padding-top: 3px;
         font-weight: 400;
        }

        #nav a:hover {
            border-top: 1px dotted #C41D0E;
        }





/* - - - carousel - - - */

#carousel {
    margin: 40px 0 0 0;
    width: 100%;
    overflow: hidden;
    z-index: -999;
}

    #carousel .inner {
        box-sizing: border-box;
        margin-left: -50px;
        z-index: -5000;
    }

        #carousel ul {
            width: 60000px;
            height: 480px;
            z-index: -5000;
        }

            #carousel li {
                height: 480px;
                float: left;
                overflow: hidden;
                z-index: -5000;
            }

                #carousel img {
                    text-align: center;
                    width: 1375px;
                    height: auto;
                    z-index: -5000;
                }

Answer 1

记住z-index 仅适用于定位元素。所以你的轮播和标题都需要有一个position 值而不是static，然后你可以为标题指定一个更高的z-index。这样box-shadow 将正确显示在轮播上方。

Answer 2

您只需在标题中添加position:relative。轮播不需要z-index 更改。

Answer 3

尝试将 !important 添加到您的影子盒中。我认为这应该可行。

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;