semantic UI - 添加 z 索引以下拉

Question

我的下拉菜单位于右侧栏下方我添加了 z 索引，但它不起作用。

        <div class="ui fixed stackable borderless blue inverted  menu grid">

      <div class="item three wide column ">
        <img src="http://semantic-ui.com/images/logo.png" class="exp">
      </div>

      <div class="item ui search six wide column">
         <div class="ui icon input">
            <input class="prompt" placeholder="Common passwords..." type="text">
            <i class="search icon"></i>
          </div>
          <div class="results"></div>
        </div>

      <a class="item two wide column ">menu</a>
    <div class="ui icon top item left pointing dropdown button " style="z-index: 100002 !important;">
  <i class="wrench icon"></i>
  <div class="menu  " style="z-index: 102;">
    <div class="header">Display Density</div>
    <div class="item">Comfortable</div>
    <div class="item">Cozy</div>
    <div class="item">Compact</div>
    <div class="ui divider"></div>
    <div class="item">Settings</div>
  </div>
</div>


    </div>

    <div class="ui right fixed vertical menu  header_space">
      <div class="item">
        <img class="ui mini image" src="/images/logo.png">
      </div>
      <a class="item">Features</a>
      <a class="item">Testimonials</a>
      <a class="item">Sign-in</a>
    </div>

看看这里的工作示例https://jsfiddle.net/49eg6rh8/

Image here

Answer 1

这就是您要找的东西？

$( document ).ready(function() {

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

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" rel="stylesheet"/>

<div class="ui fixed stackable borderless blue inverted  menu grid" style="">

 <div class="item three wide column ">
  <img src="http://semantic-ui.com/images/logo.png" class="exp">
 </div>

 <div class="item ui search six wide column">
  <div class="ui icon input">
   <input class="prompt" placeholder="Common passwords..." type="text">
   <i class="search icon"></i>
  </div>
  <div class="results"></div>
 </div>

 <a class="item two wide column ">menu</a>

 <div class="ui icon top item left pointing dropdown button " style="">
  <i class="wrench icon"></i>
  <div class="menu  " style="z-index: 300;">
   <div class="header">Display Density</div>
   <div class="item">Comfortable</div>
   <div class="item">Cozy</div>
   <div class="item">Compact</div>
   <div class="ui divider"></div>
   <div class="item">Settings</div>
  </div>
 </div>
</div>

<div class="ui right fixed vertical menu  header_space" style="z-index: 100; margin-top: 50px; ">
 <div class="item">
  <img class="ui mini image" src="/images/logo.png" >
 </div>
 <a class="item">Features</a>
 <a class="item">Testimonials</a>
 <a class="item">Sign-in</a>
</div>

semantic UI - 添加 z 索引以下拉

semantic UI - adding z index to drop down

html

css

semantic-ui