语义UI - 在其他元素下面出现的内联下拉列表

Question

基本上，问题是使用.ui.inline.dropdown创建的下拉列表显示在其下方代码中的其余字段下方。两者都是手风琴。

我的第一直觉是将下拉列表设为高z-index，输入值为较低的z-index，但这似乎不会对问题产生任何影响。

这是html：

<div class="ui accordion">
    <div class="title">
        <i class="dropdown icon"></i>
        Advanced
    </div>
    <div class="content">
        <h4>
          Results match 
          <div class="ui inline dropdown">
              <div class="text">any</div>
              <i class="dropdown icon"></i>
              <div class="menu">
                  <div class="active item" data-text="any">Any</div>
                  <div class="item" data-text="all">All</div>
                  <div class="item" data-text="none">None</div>
              </div>
          </div>
          of the fields below.
        </h4>
        <div class="field">
            <label for="firstName">Name</label>
            <div class="two fields">
                <div class="field">
                    <input type="text" class="form-control" id="firstName" autocomplete="off" placeholder="First Name">
                </div>
                <div class="field">
                    <input type="text" class="form-control" id="firstName" autocomplete="off" placeholder="Last Name">
                </div>
            </div>
        </div>
    </div>
</div>

......这就是我初始化下拉和手风琴的方式：

$( '.ui.accordion' ).accordion();
$( '.ui.dropdown' ).dropdown();