드롭 다운 목록을 외부 카드 위에 겹쳐서 표시하려면 어떻게합니까?

Google 소재 디자인 카드에 드롭 다운 목록이 있습니다. 버튼을 클릭하면 드롭 다운 목록이 카드를 덮어 쓰지 않습니다. z-index을 더 큰 값으로 설정하려고했지만 작동하지 않았습니다.드롭 다운 목록을 외부 카드 위에 겹쳐서 표시하려면 어떻게합니까?

여기 내 jsfiddle code입니다.

출처

2016-12-23 ichbinblau

드롭 다운 메뉴를 즉시 사용할 수 있도록 하시겠습니까? – aavrug

질문에 대한 전제 조건은 질문에 대답하는 데 필요한 모든 정보가 질문 자체에 추가된다는 것입니다. 여기에는 외부 링크 만 포함되므로 주제를 벗어난 것으로 간주됩니다. 형식 지정 도구를 사용하여 JavaScript의 관련 부분을 질문 자체에 전송 하시겠습니까? – halfer

부모가이기 때문에 카드 외부에 표시되지 않습니다. 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>

출처

2016-12-23 04:39:40

답변 해 주셔서 감사합니다. 두 개 이상의 카드가있는 경우 드롭 다운 목록을 다른 모든 카드보다 상위로 만드는 방법을 제안 하시겠습니까? https://jsfiddle.net/rwxh5ecd/2/ – ichbinblau

첫 번째 카드에서 'z-index'를 사용하여 다른 카드보다 더 추가 할 수 있습니다. 여기를 확인하십시오 .. https://jsfiddle.net/vr8spmnm/36/ –

이 하나 개의 ID = "상태 카드-1을주고 오버 플로우를

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

추가 "

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

여기에 ".mdl 카드가" "숨겨진 오버 플로우"를 가지고 있기 때문에 카드를 오버레이하지 않는 fiddle

출처

2016-12-23 04:40:25 ab29007

답변 주셔서 감사합니다. 두 개 이상의 카드가있는 경우 드롭 다운 목록을 다른 모든 카드보다 상위로 만드는 방법을 제안 하시겠습니까? https://jsfiddle.net/rwxh5ecd/2/ – ichbinblau

그 일을하는 동안 제게 시간을 좀주세요. – ab29007

확인 내 대답을 업데이트했습니다. – ab29007

드롭 다운 목록입니다. ".mdl-card"를 "overflow : inherit"또는 "overflow : visible"값으로 대체 할 수 있습니다.

출처

2016-12-23 04:44:33

드롭 다운 목록을 외부 카드 위에 겹쳐서 표시하려면 어떻게합니까?

답변

관련 문제