html - Jumbotron 覆盖了其上方 div 的阴影

Question

我正在尝试使用 boostrap 并具有以下 html:

<div class="drop-shadow">
        <div class="nav">
            <div class="container">
                <ul class="pull-left">
                    <li><a href="#">link1</a></li>
                    <li><a href="#">link2</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="jumbotron">
        <div class="container">
            <h1>Measure Where You Are.</h1>
        </div>
    </div>
    </div>

我的风格如下:

.drop-shadow {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 2);
 -webkit-box-shadow:0 2px 10px rgba(0, 0, 0, 2);
}

当我添加大屏幕时，导航 div 的阴影消失了，大屏幕覆盖了它。我可以在产生阴影的div中添加margin-bottom，这样就解决了问题。但问题是有没有更好的办法来解决呢？

Answer 1

向 drop-shadow 添加 position:relative; 和 z-index 似乎有效。

查看此fiddle .