z-インデックスとオーバーフローがまったく機能しない

Question

z-index、overflow、position absoluteとrest cssの機能を設定しようとしましたが、ドロップダウンメニューがまだ小さな四角に表示されています。私は、bootstrap-tabel.cssやドロップダウンなどのいくつかのスタイルは、それを修正するたびに自分自身と1つのスタイルの間で矛盾していることを知っています。

This my plunker

のstyle.cssファイルの先頭に...、サブメニューが表示され、新たな.dropdownメニュークラスにoverflow:visibleを追加するために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

。

これらの2つの例のうち1つだけを使用してください。これらは、メニューのコードとともに、bootstrap-table.min.cssファイルがPlunkerで引き起こしている衝突を無効にします。

また、！CSSセレクタチェーンを使用する必要性を避けるために、CSSセレクタチェーンを具体的に指定してください。重要なオーバーライド：

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

Answer 2

ブートストラップのcssルールによって引き起こされます。これを解決する1つの方法は、以下の通りです：（あなたのリンクでテスト）

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

ブートストラップ-table.min.cssはoverflow:autoを持っています。新しいクラスまたはIDを割り当て、それvisible作るか

上記