z-index doesn't work on my menu - html

Question

I have a menu icon that when I click on it my list items appear;
but it pushes down other elements. I want to set my z-index to it hasn't any effect on other element. but it doesn't work.
<div class="dropdown hidden-md hidden-lg ">
<ul>
<li>
<div class="dropbtn">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</div>
</li>
<li class="dropdown-content">
<ul>
<li>خانه</li>
<li>توانایی ها</li>
<li> <a href='products.php'>محصولات</a></li>
<li><a href='projects.php'>پروژه ها</a></li>
<li><a href='aboutus.php'>درباره ما</a></li>
<li><a href='contactus.php'>تماس با ما</a></li>
</ul>
</li>
</ul>
</div>
CSS:
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
clear: both;
float: right;
direction: rtl;
background-color: #f9f9f9;
min-width: 75px;
font: 1.2em Yekan;
}
.dropdown {
position: relative;
z-index: 999999999999;
float: right;
text-align: right;
}
JS
$(".dropbtn").on("click",
function() {
$(".dropdown-content").toggle();
}
);

Answer 1

z-index is a relative property that display your index according to the order where you put your element in your page.
<div>here the z-index is equal to 1</div>
<div>here the z-index is equal to 2</div>
If you want to be sure that your z-index is take in consideration you can put an absolute position to your html element but you break the index stack of your element.
For sample in your case if you want to do that your .dropdown is still above all the other element you can do :
.dropdown {
position: absolute;
z-index:999999999999;
float: right;
text-align: right;
}
But it's will also run with a relative element position and in than case you have to be careful of teh impact because you break the "z-index stack". One advice is that case is to set all the z-index of all your element impact by your design.

Answer 2

First, I put your code on embed and add some style to see your btn.
Second, I fix your bug by replacing position:relative by position:absolute
$(".dropbtn").on("click", function(){
$(".dropdown-content").toggle();
});
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display:none;
clear: both;
float: right;
direction: rtl;
background-color: #f9f9f9;
min-width: 75px;
font:1.2em Yekan;
}
.dropdown {
position: absolute;
z-index:999999999999;
float: right;
text-align: right;
}
ul {
list-style-type:none
}
.dropbtn {
cursor:pointer;
}
.bar {
display:block;
height: 4px;
width: 24px;
background: black;
margin-bottom: 5px;
border-radius: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown hidden-md hidden-lg ">
<ul>
<li>
<div class="dropbtn">
<span class="bar1 bar"></span>
<span class="bar2 bar"></span>
<span class="bar3 bar"></span>
</div>
</li>
<li class="dropdown-content">
<ul>
<li>خانه</li>
<li>توانایی ها</li>
<li> <a href='products.php'>محصولات</a></li>
<li><a href='projects.php'>پروژه ها</a></li>
<li><a href='aboutus.php'>درباره ما</a></li>
<li><a href='contactus.php'>تماس با ما</a></li>
</ul>
</li>
</ul>
</div>