實體化下拉落後於其他元素，因爲oferflow和z-index doesent apply

Question

所以我正在使用Materialize處理項目，並且出於某些未知原因，我的下拉菜單顯示不正確。如果我有一個小高度的對象，下拉總是隱藏在它的後面/是對象結束的地方... 圖片上的示例：example of the issue和（圖片必須移除，因爲沒有足夠的聲望來發布超過2張圖片）

我曾嘗試更改z-index和溢出，它似乎工作...所以任何想法??

編輯：Applyed什麼建議，但現在它看起來像這樣...

好了，所以這裏是整個DIV：

 <div class="columns" style="overflow-y: visible;"> 
     {{#if middle}} 
      {{#if board.f_enabled_lanes}} 


        <div class="laneSortable"> 

        {{#each lane in boardCardsLanesArray}} 
        <div class="lanes" value="{{lane._id.valueOf}}"> 
          <div style="text-align:center; background-color: #e0e0e0;" class="lane_header lane_sort"> 

           {{#each cardDataLane in boardCardsDataArray2 lane.lkp_card_data_fkeyi_ref}} 
            <!--<b>{{cardDataLane.txt_name}}</b>--> 
            {{> Cards_view board=board cardData=cardDataLane boardName=board.txt_name boardId=board._id parentCard=card._id pcOrder=card.lng_order leneCard=true}} 
           {{/each}} 

          </div> 
          <div class=" columnSortable"> 
          {{#let laneIndex=@index}} 
           {{#each column in columnArray}} 
            {{> Columns_view rowIndex=laneIndex column=column board=board boardId=board._id workspaceId=workspaceId middle=true boardName=board.txt_name lane=lane.lkp_card_data_fkeyi_ref canEdit=canEdit}} 
           {{else}} 
            <!-- {{> Columns_view column=column board=board boardId=board._id workspaceId=workspaceId middle=true boardName=board.txt_name}}--><!-- else briši Dnd test --> 
           {{/each}} 
          {{/let}} 
          </div> 
        </div> 
        {{/each}} 

        </div> 

      {{else}} 
       <div class=" columnSortable"> 
       {{#each column in columnArray}} 
        {{> Columns_view rowIndex=@index column=column board=board boardId=board._id workspaceId=workspaceId middle=true boardName=board.txt_name canEdit=canEdit}} 
       {{else}} 
        <!-- {{> Columns_view column=column board=board boardId=board._id workspaceId=workspaceId middle=true boardName=board.txt_name}}--><!-- else briši Dnd test --> 
       {{/each}} 
       </div> 

      {{/if}} 
      <!-- {{> Columns_add_new boardId=board._id workspaceId=workspaceId}}--> 
     {{else}} 

      <div class="column column_style_boards_view" style=""> 
       <div class="boardBar flex board_sort" style="background-color: transparent;"> 
        <div class="boardNameBacklog" value="{{board.txt_name}}" boardType="1"><h6 style="font-size:16px;"><i 
          class="material-icons icon icon-black" style="line-height: 18px;">view_list</i>{{board.txt_name}} 
         <!--{{board.type}}--></h6></div> 
        <div class="boardOption"> 
         <a class='dropdown-button-board' href='#' data-activates='boardOptions{{board._id.valueOf}}'><i 
           class="material-icons icon-black">more_vert</i></a> 
        </div> 

       </div> 
      <div class="cardSortable"> 
       {{#each card in boardCardsArray}} 
        <!--{{card._id.valueOf}} -nadrejene kartice--> 
        {{#each cardData in boardCardsDataArray2 card.lkp_card_data_fkeyi_ref}} 

         {{> Cards_view board=board cardData=cardData boardName=board.txt_name boardId=board._id parentCard=card._id pcOrder=card.lng_order canEdit=canEdit}}<!-- todo ne cela kartica mapak najprej card samo id in potem znotraj carddata --> 

        {{/each}} 
       {{/each}} 

       <!--drugače smo v backglogu in dodajmo kartice na boarde--> 
       <!-- {{> Cards_add_new columnId=null workspaceId=workspaceId boardId=board._id}}--> 
       {{#if canEdit}} 
       <a href="" id="openModalNewCard_BL" class="new_Card_style_board_view addCardBL-js" modalName="newCard"> Add card ...</a> 
       {{/if}} 
      </div> 
      </div> 
     {{/if}} 

     {{#if board.f_enabled_lanes}} 
      {{#if canEdit}} 
       <div><!--{{> Cards_add_new columnId=null workspaceId=workspaceId boardId=board._id f_lane=true}}--> 
        <a href="" id="openModalNewCard_BL" modalName="newCard"> Add lane ...</a> 
       </div><!-- dodajanje lanes je isto kot kartica z f_lane parametrom --> 
      {{/if}} 
     {{/if}} 
    </div> 

下面是下拉菜單的代碼：

<div id='columnOptions{{column._id.valueOf}}-{{rowIndex}}' class='dropdown-content' style="list-style-type: none;"> 
    {{#if canEdit}} 
    <li><a href="">Subscribe</a></li> 
    <li class="divider"></li> 
    <li><a href="" id="openModalRenameColumn" modalName="renameColumnModal-{{column._id.valueOf}}">Rename</a></li> 
    <li><a href="" id="deleteColumn">Delete</a></li> 
    {{/if}} 
</div> 

PS：對不起，有錯誤的英文：/

Answer 1

下拉菜單是剪切或隱藏，如果它的父母有overflow:hidden，所以你可以通過附加一個css來改變它到overflow:visible。