下拉菜單 - z-index堆棧問題

我的團隊和我在頁面上堆疊Dropdown組件時遇到問題。本質上，我們希望下拉按鈕在點擊按鈕時在頂部導航下滑動，但當它向下滑動時，它應該位於其他所有位置之上：子導航和下面的內容。下拉菜單 - z-index堆棧問題

目前，下拉菜單被定位爲絕對位置，動畫以transform: translateY()執行。我們嘗試將其外部的元素定位爲具有較高z-索引的相對（外部爲<ul>,<nav>和<div id="top-nav">元素），以確保下拉菜單保持在其下方，但到目前爲止它還沒有工作。

我們也無法修改以下div＃內容的任何CSS或結構，但我們確實有靈活性，可以將Dropdown結構放置在#header中。

編輯：盡我所能來重新創建的jsfiddle的情景在這裏：https://jsfiddle.net/4zaas4sq/

這裏的大致我們降價的樣子：

<body> 
    <div id="header"> 
    <div> 
     **<div id="top-nav">** 
     <div> 
      **<nav>** 
      <ul></ul> 
      **<ul>** 
       <li> 
       <DROPDOWN> 
        <button onClick={toggleDropdown}>Log In</button> 
        <div className={(this.state.show && 'show})> 
        <ul></ul> 
        </div> 
        ... 
       </DROPDOWN> 
       </li> 
       <li></li> 
      </ul> 
      </nav> 
     </div> 
     </div> 
     <div id="sub-nav"> 
     ... 
     </div> 
    </div> 
    </div> 
    <div id="content"> 

    </div> 
</body>

這裏有一個線框描繪的最終狀態下拉。

wireframe of final state of dropdown

任何幫助或建議，將不勝感激！

來源

2017-10-18 bteng22

你可以發佈CSS或附加一些jsfiddle嗎？ – void

試過我最好重新創建場景https://jsfiddle.net/4zaas4sq/ – bteng22

如果你使用的是jQuery，你可以簡單地滑動切換。 https://jsfiddle.net/xsrhzvw4/1/ – Confuzing

我用最大高度property.I並沒有改變很多東西在你的code.In JS代碼，你會看到主changes.Let我知道，如果這個解決方案是什麼，你want.Thanks :)

<div id="dropdown" class="hideItem">

JS代碼

$(document).ready(function() { 
$('#dropdown-button').click(function() { 
    if($("#dropdown").hasClass('hideItem')){ 
     $("#dropdown").css('max-height' , '100%'); 
     $("#dropdown").removeClass('hideItem'); 
     $("#dropdown").addClass('showItem'); 
    }else{ 
     $("#dropdown").css('max-height' , '0'); 
     $("#dropdown").addClass('hideItem'); 
     $("#dropdown").removeClass('showItem'); 
    } 
}); 
});

CSS代碼

：

在HTML代碼中使用id = 「下拉菜單」像這樣的除法添加類= 「hideItem」

html, body { 
height: 100%; 
} 

#top-nav { 
    background-color: mediumpurple; 
    width: 100%; 
} 

.nav { 
    display: flex; 
    justify-content: space-between; 
} 

.inner-left-nav { 
    list-style: none; 
    display: flex; 
} 

.inner-left-nav li { 
    padding: 5px; 
    border: 1px solid black; 
    } 
    .inner-right-nav { 
     display: flex; 
     list-style: none; 
     margin: 0; 
    } 

    .inner-right-nav li { 
    align-items: center; 
    padding: 0 5px; 
    } 

    .dropdown-container { 
     display: flex; 
     align-items: center; 
     height: 100%; 
    } 

    #dropdown { 
     position: absolute; 
     top: 70px; 
     right: 100px; 
     max-height: 0; 
     overflow-y: hidden; 
     transition: max-height 1s ease-in-out; 
     background-color: mediumseagreen; 
    } 

    #dropdown.show { 
    visibility: visible; 
    transform: translateY(0%); 
    transition: visibility 0s, transform 0.3s; 
    } 

    #dropdown-button { 
     border: 1px solid black; 
     background: transparent; 
     padding: 0 20px; 
     cursor: pointer; 
    } 

    .dropdown-list { 
     padding: 0; 
     list-style: none; 
    } 
    #sub-nav { 
     display: flex; 
     justify-content: space-between; 
     background-color: grey; 
    } 

    #content { 
     background-color: azure; 
     width: 100%; 
     height: 100%; 
    }

來源

2017-10-18 21:38:44

下拉菜單 - z-index堆棧問題

回答

相關問題