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

这是你要找的？

＆＃13;

$( document ).ready(function() {

$('.ui.dropdown')
  .dropdown();
});

＆＃13;

<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>

＆＃13;

语义UI - 添加z索引以下拉

1 个答案: