具有transform屬性的子元素內部z-index

Question

我有問題，我想知道你們是否可以幫助我解決這個問題。

如摘要所示，我有一些元素

transform: translate(0,0);

然后，在它們內部，當您單擊按鈕時，我將顯示一個“下拉”元素。

當此下拉菜單的一部分隱藏在其他元素后面時，問題就來了，我發現這是發生的，因為其父元素具有此transform屬性。

我的代碼包含更多內容，該片段只是一個示例。 我不能擺脫轉換屬性。

我想知道是否有任何解決方案。 我正在嘗試僅使用CSS來解決它。

干杯！！

 $(document).ready(function() { $('button[name="button"]').click(function(e) { $(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open'); }); }); 

 .boxes { list-style-type: none; } .boxes >li { float: left; width: 100px; height: 100px; background-color: red; margin: 5px; transform: translate(0, 0); } .download-container { background: rgba(40, 39, 39, 0.8); bottom: 0; position: absolute; text-align: center; width: 100%; } .download-container .dropdown-container { display: inline-block; position: relative; } .download-container .dropdown-container button { background: #0bb9ab; color: #fff; padding: 6px 12px; } .template-options-dropdown { list-style-type: none; text-align: left; padding: 0; position: absolute; background-color: #111; visibility: hidden; } .template-options-dropdown.open { visibility: visible; } .template-options-dropdown li a { color: white; text-decoration: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="boxes"> <li> <div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div> </li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> </ul> 

Answer 1

不幸的是， 可能沒有純CSS解決方案-CSS3過渡創建了一個新的堆棧上下文 -有關其他效果，請參見相關文檔說明和this thread ：

如果該屬性的值等於零，則將創建一個堆棧上下文。

資料來源： MDN

您可以輕松地在此處用position: relative替換translate(0,0) ，並向.template-options-dropdown添加大於零的z-index 來解決問題 。

 $(document).ready(function() { $('button[name="button"]').click(function(e) { $(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open'); }); }); 

 .boxes { list-style-type: none; } .boxes >li { float: left; width: 100px; height: 100px; background-color: red; margin: 5px; /*transform: translate(0, 0);*/ position: relative; /*ADDED*/ } .download-container { background: rgba(40, 39, 39, 0.8); bottom: 0; position: absolute; text-align: center; width: 100%; } .download-container .dropdown-container { display: inline-block; position: relative; } .download-container .dropdown-container button { background: #0bb9ab; color: #fff; padding: 6px 12px; } .template-options-dropdown { list-style-type: none; text-align: left; padding: 0; position: absolute; background-color: #111; visibility: hidden; z-index: 2;/*ADDED*/ } .template-options-dropdown.open { visibility: visible; } .template-options-dropdown li a { color: white; text-decoration: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="boxes"> <li> <div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div> </li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> </ul> 

一個駭人聽聞的解決方案 ，弄亂了包裝 -您可以添加更多的轉換：

1. 為ul添加scaleY(-1)以使列表向后傾斜，因為具有較高索引的列表項將超過具有較低索引的列表項。

2. 在li上添加一個反轉scaleY(-1) ，以使世界恢復正常。

3. 還要清除 li浮子。

請參見下面的演示：

 $(document).ready(function() { $('button[name="button"]').click(function(e) { $(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open'); }); }); 

 .boxes { list-style-type: none; transform: scaleY(-1);/*ADDED*/ } .boxes:after {/*ADDED*/ content: ''; clear: both; display: block; } .boxes >li { float: left; width: 100px; height: 100px; background-color: red; margin: 5px; transform: translate(0, 0) scaleY(-1);/*ADDED*/ } .download-container { background: rgba(40, 39, 39, 0.8); bottom: 0; position: absolute; text-align: center; width: 100%; } .download-container .dropdown-container { display: inline-block; position: relative; } .download-container .dropdown-container button { background: #0bb9ab; color: #fff; padding: 6px 12px; } .template-options-dropdown { list-style-type: none; text-align: left; padding: 0; position: absolute; background-color: #111; visibility: hidden; } .template-options-dropdown.open { visibility: visible; } .template-options-dropdown li a { color: white; text-decoration: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="boxes"> <li> <div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div> </li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> </ul> 

如果translate(0,0)仍然無法刪除，則除了使用javascript外，您別無選擇：

1. 通過給z-index等於列表中的索引來反轉列表堆棧。

2. 添加position:relative對於li

請參見下面的演示：

 $(document).ready(function() { // ADDED $($('ul.boxes > li').get().reverse()).each(function(index){ $(this).css('z-index', index); }); $('button[name="button"]').click(function(e) { $(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open'); }); }); 

 .boxes { list-style-type: none; } .boxes >li { float: left; width: 100px; height: 100px; background-color: red; margin: 5px; transform: translate(0, 0); position: relative;/*ADDED*/ } .download-container { background: rgba(40, 39, 39, 0.8); bottom: 0; position: absolute; text-align: center; width: 100%; } .download-container .dropdown-container { display: inline-block; position: relative; } .download-container .dropdown-container button { background: #0bb9ab; color: #fff; padding: 6px 12px; } .template-options-dropdown { list-style-type: none; text-align: left; padding: 0; position: absolute; background-color: #111; visibility: hidden; } .template-options-dropdown.open { visibility: visible; } .template-options-dropdown li a { color: white; text-decoration: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="boxes"> <li> <div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div> </li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> </ul> 

Answer 2

z-index僅適用於其position屬性已顯式設置為絕對，固定或相對的元素。 因此，應用position: relative對於li元素。

對於固定數量的元素，您可以嘗試

.boxes li:nth-child(1) {
  z-index: 8;
}

.boxes li:nth-child(2) {
  z-index: 7;
}

.boxes li:nth-child(3) {
  z-index: 6;
}

.boxes li:nth-child(4) {
  z-index: 5;
}

.boxes li:nth-child(5) {
  z-index: 4;
}

.boxes li:nth-child(6) {
  z-index: 3;
}

.boxes li:nth-child(7) {
  z-index: 2;
}

.boxes li:nth-child(8) {
  z-index: 1;
}

或者對於未知數量的元素，您可以使用腳本動態應用它。

 $(document).ready(function() { $('button[name="button"]').click(function(e) { $(e.currentTarget).parent().find('.template-options-dropdown').toggleClass('open'); }); }); 

 .boxes { list-style-type: none; } .boxes >li { float: left; width: 100px; height: 100px; background-color: red; margin: 5px; transform: translate(0, 0); position: relative; } .download-container { background: rgba(40, 39, 39, 0.8); bottom: 0; position: absolute; text-align: center; width: 100%; } .download-container .dropdown-container { display: inline-block; position: relative; } .download-container .dropdown-container button { background: #0bb9ab; color: #fff; padding: 6px 12px; } .template-options-dropdown { list-style-type: none; text-align: left; padding: 0; position: absolute; background-color: #111; visibility: hidden; } .template-options-dropdown.open { visibility: visible; } .template-options-dropdown li a { color: white; text-decoration: none; } .boxes li:nth-child(1) { z-index: 8; } .boxes li:nth-child(2) { z-index: 7; } .boxes li:nth-child(3) { z-index: 6; } .boxes li:nth-child(4) { z-index: 5; } .boxes li:nth-child(5) { z-index: 4; } .boxes li:nth-child(6) { z-index: 3; } .boxes li:nth-child(7) { z-index: 2; } .boxes li:nth-child(8) { z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="boxes"> <li> <div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div> </li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> </ul> 

Answer 3

您接近了，但是如果是我，我會在<li>或div.download-container上設置.open類，使用它設置一個巨大的z-index，然后使用級聯打開子菜單。 我們還必須設置position:relative; 在要設置z-index的元素上，否則z-index不執行任何操作。

例：

 $(document).ready(function() { $('button[name="button"]').click(function(e) { $(e.currentTarget).parents('li').toggleClass('open'); }); }); 

 .boxes { list-style-type: none; } .boxes >li { float: left; width: 100px; height: 100px; background-color: red; margin: 5px; transform: translate(0, 0); position:relative; } .boxes >li.open { z-index:500; } .download-container { background: rgba(40, 39, 39, 0.8); bottom: 0; position: absolute; text-align: center; width: 100%; } .download-container .dropdown-container { display: inline-block; position: relative; } .download-container .dropdown-container button { background: #0bb9ab; color: #fff; padding: 6px 12px; } .template-options-dropdown { list-style-type: none; text-align: left; padding: 0; position: absolute; background-color: #111; visibility: hidden; } .boxes li.open .template-options-dropdown { visibility: visible; } .template-options-dropdown li a { color: white; text-decoration: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="boxes"> <li> <div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div> </li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> <li><div class="download-container"> <div class="dropdown-container"> <button type="button" name="button">Download</button> <ul class="template-options-dropdown"> <li> <a href="#">Original</a> </li> <li> <a href="#">Thumb</a> </li> <li> <a href="#">Mobile</a> </li> <li> <a href="#">Tab</a> </li> <li> <a href="#">Web</a> </li> <li> <a href="#">Large web</a> </li> </ul> </div> </div></li> </ul>