语义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=""> 
 

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

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

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

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

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