在不使用z-index的情況下在另一個頂部顯示div

我已經創建了一個自定義下拉菜單，其中一個<div>保存當前值，並充當<select>字段，另一個下面的菜單在頂部點擊時顯示，保存所有<option>值。在不使用z-index的情況下在另一個頂部顯示div

設計要求底部<div>位置略低於上方（奇怪的圓角等），所以我用z-index來實現這一點。這一切都有效，直到我有兩個相互靠近的下拉菜單。如果單擊上一個顯示在下拉選項列表，但它會在第二個下拉菜單以及這是極不可取的下方。這是jsfiddle中的簡化版本： jsFiddle

正如你所看到的，第一個下拉菜單很好，但第二個隱藏在第三個下面。任何想法我怎麼能實現這個，所以第二個菜單也適用？可能沒有使用z-index？

來源

2016-03-11 mmvsbg

不止一個下拉列表可以是在同一時間開放？在你的例子中，兩個是開放的，但是，在實踐中會這樣嗎？ – Hatchet

兩個不能同時打開。如果你檢查jsFiddle，你會看到第三個未打開，但第二個仍然隱藏在它下面。我已經展示了第一張，以表明它距離其他的很遠，但實際上這不會發生。其他兩個攤位的問題仍然存在。 – mmvsbg

首先，在一個元素包裹每個菜單。我用了一個div.container。

由於只有一個菜單將是開放的時間，簡單地改變.major和.minor元素的z-index在每個容器（懸停在我的例子）正常工作：

.major { 
 
    position: relative; 
 
    width: 100px; 
 
    background-color: red; 
 
    z-index: 1; 
 
} 
 
.minor { 
 
    position: absolute; 
 
    width: 150px; 
 
    background-color: blue; 
 
    padding-top: 10px; 
 
    margin-top: -10px; 
 
    z-index: 0; 
 
    display: none; 
 
} 
 
.container:hover .major { 
 
    z-index: 5; 
 
} 
 
.container:hover .minor { 
 
    display: block; 
 
    z-index: 4; 
 
} 
 
.moveup { 
 
    margin-top: -25px; 
 
}

<div class="container"> 
 
    <div class="major"> 
 
    First one fine 
 
    </div> 
 
    <div class="minor"> 
 
    Option part goes here Option part goes here Option part goes here 
 
    </div> 
 
</div> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<div class="container"> 
 
    <div class="major"> 
 
    Second menu 
 
    </div> 
 
    <div class="minor"> 
 
    Option part goes here Option part goes here Option part goes here 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="major"> 
 
    Third menu 
 
    </div> 
 
    <div class="minor"> 
 
    Option part goes here Option part goes here Option part goes here 
 
    </div> 
 
</div>

來源

2016-03-11 21:00:55 Hatchet

很好，謝謝！ – mmvsbg

我不是100％肯定你的意思，但如果我沒有錯，解決方案應該是包裹.major和.minor的div所以他們不會互相重疊，像這樣：

<div class="dropdown"> 
    <div class="major"> 
    First one fine 
    </div> 
    <div class="minor"> 
    Option part goes here 
    Option part goes here 
    Option part goes here 
    </div> 
</div>

見我對你的jsfiddle的叉：https://jsfiddle.net/jk1dn4yx/

來源

2016-03-11 20:34:00 KochFolie

將不起作用：https://jsfiddle.net/jk1dn4yx/1/ 兩個.major部分可以是一個低於其他的，我無法控制，當不顯示在下拉菜單中它實際上是罰款。然而，當你點擊一個上儘快（這是不是可以在演示中，我直接顯示爲開到那裏）的藍色部分是可見，它是下部紅色的div實際上是背後的問題... – mmvsbg

但是你可以添加一個包裝div？如果你打開.minor格時，例如還添加了類「開放」，試試這個擴展的z-index的解決方案：https://jsfiddle.net/jk1dn4yx/2/ 也可以嘗試斧頭的解決方案，這似乎是基本上我在做這個評論時做了什麼，然後纔看到Hatchet的回答。 :) – KochFolie

是的，他也是，雖然改變的z-index，應該工作。 – mmvsbg

在不使用z-index的情況下在另一個頂部顯示div

回答

相關問題