表单元格部分隐藏的引导下拉菜单答案

【问题标题】：Bootstrap dropdown partially hidden by table cells表单元格部分隐藏的引导下拉菜单
【发布时间】：2018-03-10 14:44:54
【问题描述】：

这是用于创建下拉列表的 html：

<div class="btn-group pull-right elipsis-margin open">
<button type="button" class="btn btn-link btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-validation-status="ok">
    <i class="fa fa-ellipsis-v fa-lg"></i>
</button>
<ul class="dropdown-menu">
    <li><a href="#shareModal" data-toggle="modal" class="btn-action"><i class="fa fa-share fa-fw"></i>Share</a></li>
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i>Edit</a></li>

    <li role="separator" class="divider"></li>
    <li><a href="#unshareModal" data-toggle="modal" class="btn-action"><i class="fa fa-ban fa-fw"></i>Unshare</a></li>
</ul>

这个 div 位于表格主体的内部。显然，下拉菜单被表格单元格挡住了，但它的 z 位置设置为 1000。看起来它应该可以正常显示。

任何帮助将不胜感激。

【问题讨论】：

标签： html css twitter-bootstrap drop-down-menu

【解决方案1】：

z-index 仅适用于位置属性已明确设置为 absolute 、 fixed 或 relative 的元素。

尝试将您的下拉菜单位置设置为上述之一。您可能还需要对表格执行此操作。

例如：

.your-class {
  position: relative;
}

【讨论】：