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

当我添加jumbotron时，nav div的阴影消失了，jumbotron覆盖了它。我可以在删除阴影的div中添加margin-bottom，从而解决问题。但问题是，是否有更好的方法来解决它？

Answer 1

将if [[ "$1" = "a" ]] then addition exit 0 elif [[ "$1" = "s" ]] then subtraction exit 0 elif [[ "$1" = "m" ]] then multiplication exit 0 elif [[ "$1" = "d" ]] then division exit 0 else echo "Usage:" echo "Please enter a/s/m/d and two integers" exit 1 fi 和position:relative;添加到z-index似乎有效。

请参阅此fiddle。