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

Question

我希望标题的导航有一个框阴影。然而，盒子阴影似乎被我放在它下面的旋转木马隐藏了。我为#carousel的所有孩子设置了一个z-index，但是盒子阴影仍然没有出现。

（网页摘要）

当我将#carousel推下来时，当我给它下限时，会发生什么：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>

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

尝试添加！重要的是你的影子箱。我认为这应该有效。

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;