容器外部的下拉按钮

Question

我有一个使用以下代码的下拉按钮：

<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

我在div容器中有此按钮，问题是当我单击该按钮时，下拉列表显示在div边框内。

我需要它出现在div之外，在页面中所有项目的顶部，该怎么做？

请看这张图片：

Answer 1

将z-index:1000用于下拉菜单

<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
<div class="dropdown-menu" style="z-index:1000">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

谢谢。