语义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/

图片这里

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>