Question

正如您在jsfiddle中看到的那样，由于某种原因，第一个输入下拉列表位于第二个输入字段下。因为我不想使用整个jquery，所以我制作了一些自定义的javascript来创建下拉列表。

有没有办法让下拉菜单超过输入字段？谢谢你的时间

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

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

Answer 2

你应该先添加

#selection__menu{
  z-index:100;
}

然后你将第二个下拉列表的z-index设置为小于100的值，例如-1，

style="z-index: -1;"

所以第二部分会是这样的

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

Semantic-ui下拉列表与输入字段重叠

2 个答案: