ドロップダウンリストを外部カードの上に重ねることはできますか？

Question

Googleマテリアルデザインカードのドロップダウンリストがあります。ボタンをクリックすると、ドロップダウンリストはカードにオーバーレイされません。 z-indexをもっと大きな値に設定しようとしましたが、うまくいきませんでした。

ここは私のjsfiddle codeです。

Answer 1

親のためカード外には表示されませんoverflow:hiddenです。

だから、あなたはそのためのCSSを追加する必要があります。

.mdl-card { 
     overflow: visible !important; 
} 

.status-card { 
 
    min-height: 15% !important; 
 
    display: block !important; 
 
} 
 
.mdl-card { 
 
    overflow: visible !important; 
 
} 
 

 
.status-card > .mdl-card__supporting-text { 
 
    margin-bottom:0px !important; 
 
} 
 

 
.status-card > .mdl-card__supporting-text > .mdl-cell--10-col { 
 
    padding: 8% 0 8% 2%; 
 
} 
 

 
.status-card span, 
 
color: black; 
 
} 
 

 
.status-card li:before, 
 
content: '■'; 
 
padding-right: 0.5em; 
 
font-size: 170%; /* or whatever */ 
 
} 
 

 
.status-card ul, 
 
max-height: 140px; 
 
overflow-y: auto; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.3/material.min.css" rel="stylesheet"/> 
 
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.3/material.indigo-pink.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.3/material.min.js"></script> 
 

 
<div class="status-card mdl-card mdl-cell mdl-shadow--2dp mdl-cell--3-col">     
 
    <div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing" style="margin-left: 4%;">       
 
    <button id="test1" class="mdl-button mdl-js-button mdl-button--raised" style="margin-top: 8%"></button> 
 
    <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events" for="test1"> 
 
     <li class="mdl-menu__item" style="color: #cd8daa;"><span>xyz</span></li> 
 
     <li class="mdl-menu__item" style="color: #cd8daa;"><span>yue</span></li> 
 
     <li class="mdl-menu__item" style="color: #cd8daa;"><span>24</span></li> 
 
    </ul>      
 
    <div class="mdl-cell mdl-cell--6-col" style="display: flex; flex-flow: row wrap;"> 
 
     <h6 title="">TEST</h6>        
 
    </div>          
 
    </div> 
 
</div>

Answer 2

この1つのID = "ステータスカード-1を与えるオーバーフロー

.status-card { 
    min-height: 15% !important; 
    display: block !important; 
    overflow:visible; 
} 

を追加します。 "

#status-card-1{ 
    z-index:20; 
} 

はここで「の.mdlカードが」 『：隠されたオーバーフロー』を持っているので、カードをオーバーレイしないfiddle

Answer 3

ドロップダウンリストです。 ".mdl-card"を "overflow：inherit"または "overflow：visible"の値で上書きすることができます