codenut codenut - 1 month ago 14
CSS Question

semantic UI - adding z index to drop down

my drop down gets under the right side bar i have added z index but it is not working.

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


take a look at the working example here https://jsfiddle.net/49eg6rh8/

Image here

Answer

This is what you looking for?

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