z-index和overflow根本不起作用

Question

我试图设置z-index，overflow，position absolute和rest css功能，但是下拉菜单仍然出现在小方块中。通过控制台日志，我发现bootstrap-tabel.css和dropdown之间的某些样式在它们之间是冲突的，每次都覆盖其他一种样式我该如何修复它？

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

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

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

boostrap-table.min.css有overflow:auto。分配新的类或ID并将其设为visible或使用!important，如上所述