语义UI下拉列表被输入字段覆盖

Question

As you can see in jsfiddle for some reason the first input dropdown list goes under the second input field. Because I don't want to use the whole of jquery I made some custom javascript to create the drop down.

Is there any way to make the dropdown go over the input field? Thank you for your time

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>

Answer 1

原来，我只需要将父包装的<div class="ui fluid search selection dropdown" style="z-index: 5">上的<div class="ui fluid search selection dropdown" style="z-index: 5">更改为第一个，将<div class="ui fluid search selection dropdown" style="z-index: 2"> <div class="ui fluid search selection dropdown" style="z-index: 5">更改为第一个<div class="ui fluid search selection dropdown" style="z-index: 2">到第二个。

Answer 2

you should first add

#selection__menu{
  z-index:100;
}

then you shout set z-index of second dropdown to something less than 100 , for example -1,

style="z-index: -1;"

so second part would be like this

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