2

ヘッダーのナビゲーションにボックスの影を付けたいです。ただし、ボックスの影は、その下に配置したカルーセルによって隠されているようです。#carousel のすべての子の z-index を配置しましたが、ボックス シャドウはまだ表示されません。

(ページスニペット)ここに画像の説明を入力

margin-top: 40px; を指定して #carousel を押し下げると、次のようになります。

(別のページのスニペット)ここに画像の説明を入力

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

3 に答える 3

6

z-index配置された要素でのみ機能することを忘れないでください。したがって、カルーセルとヘッダーの両方にposition以外の値が必要であり、ヘッダーstaticに高い値を指定できますz-index。そうbox-shadowすれば、カルーセルの上に適切に表示されます。

于 2013-04-13T03:38:52.283 に答える
3

position:relativeヘッダーに追加するだけです。カルーセルは変更する必要はありませんz-index。

于 2013-04-13T09:53:31.600 に答える
0

!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;
于 2013-04-13T02:15:33.907 に答える