z-index 和 overflow 根本不起作用

Question

我尝试设置 z-index、溢出、绝对位置和其余 css 功能，但下拉菜单仍然出现在小方块中。通过控制台日志，我发现某些样式（例如 bootstrap-tabel.css 和下拉菜单在它们之间存在冲突，并且每次都会覆盖其他样式我该如何解决？

This my plunker

css

.dropdown-menu>li
{   position:relative;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:pointer;
}
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    z-index: 999;
    overflow: visible;
    display:none;
    margin-top: -1px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left-color:#fff;
    box-shadow:none;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -moz-overflow-scrolling: touch;
    -ms-overflow-scrolling: touch;
    -o-overflow-scrolling: touch;
    overflow-scrolling: touch;
    height: auto;
    max-height: 500px;
    border-left: none;
    border-right: none;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
    border-radius: 0 !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;

}
.right-caret:after,.left-caret:after
{   content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left:5px;
}
.right-caret:after
{   border-left: 5px solid #ffaf46;
}
.left-caret:after
{   border-right: 5px solid #ffaf46;
}

Answer 1

要显示子菜单，请将 overflow:visible 添加到新的 .dropdown 菜单 class... 在 style.css 文件的顶部。

仅使用这两个示例中的一个。它们都将使用菜单代码覆盖 bootstrap-table.min.css 文件在 Plunker 中引起的冲突。

.fixed-table-toolbar .dropdown-menu {
    overflow: visible ! important;
}

或者更具体地使用 CSS 选择器链，以避免必须使用 !重要覆盖：

.fixed-table-toolbar #toolbar .dropdown-menu {
  overflow: visible;
}

Answer 2

它是由 bootstrap 中的 css 规则引起的。解决此问题的一种方法如下：（在您的 link 上测试）

.fixed-table-toolbar .dropdown-menu{
  overflow:visible !important;
}

boostrap-table.min.css 有 overflow:auto。分配一个新的 class 或 id 并使其成为 visible 或像上面那样使用 !important

z-index 和 overflow 根本不起作用

z-index and overflow doesn't work at all

html

css

z-index

twitter-bootstrap