Semantic-UI下拉列表與輸入字段重疊

由於某種原因，您可以在jsfiddle中看到第一個輸入下拉列表位於第二個輸入字段下。因爲我不想使用整個jquery，所以我創建了一些自定義javascript來創建下拉菜單。Semantic-UI下拉列表與輸入字段重疊

有什麼辦法讓下拉式輸入字段？感謝您的時間

HTML：

<div class="field"> 
     <label>Institution</label> 
     <div class="field"> 
     <div class="ui fluid search selection dropdown"> 
      <input class="search contains-data" type="text" name="institution name" id="selection__text" placeholder="Select institution"> 
      <i class="dropdown icon"></i> 
      <div class="menu transition hidden"id="selection__menu"> 
         <div class="item">Hellow</div> 
      <div class="item">Hellow</div> 
      <div class="item">Hellow</div> 
         <div class="item">Hellow</div> 
      <div class="item">Hellow</div> 
      <div class="item">Hellow</div>   
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="field"> 
     <label>Location</label> 
     <div class="field"> 
     <div class="ui fluid search selection dropdown"> 
      <input class="search contains-data" type="text" name="institution name" placeholder="Select location"> 
      <i class="dropdown icon"></i> 
      <div class="menu transition hidden"> 
      <div class="item">Hellow</div> 
      <div class="item">Hellow</div> 
      <div class="item">Hellow</div> 
      </div> 
     </div> 
     </div> 
    </div>

來源

2017-07-24 August

應先添加第二個下拉的

#selection__menu{ 
    z-index:100; 
}

那麼你喊組Z指數的東西低於100，例如-1 ，

style="z-index: -1;"

第二部分會是這樣的

<label>Location</label> 
     <div class="field"> 
<div class="ui fluid search selection dropdown" style="z-index: -1;">

來源

2017-07-24 12:58:09

我無法輕鬆將此答案應用於所提供的代碼。我認爲這個答案可以通過更具體或更一般的方式來改善。你能提供需要他們的Z指數調整的確切部分嗎？或者，你可以提供一個更一般的答案來說明z索引在這種情況下的工作原理嗎？ – OliverRadini

selection__menu是第一個下拉div的ID，它超出了第二個下拉列表，因此我們應該將它的Z-index設置爲更高，比如100 –

我已經提到需要更改您需要在代碼中編輯我的回覆 –

原來我只是需要改變父包裝 <div class="ui fluid search selection dropdown" style="z-index: 5"> 到第一個和<div class="ui fluid search selection dropdown" style="z-index: 2">到第二個的z-index。

來源

2017-07-24 14:49:40 August

如果這是正確的，你可能想要接受這個答案 – OliverRadini

我將只能在2天內完成@OliverRadini – August

Semantic-UI下拉列表與輸入字段重疊

回答

相關問題