Question

我有一个菜单图标，当我点击它时，我的列表项会出现; 但它压低了其他元素。我想将z-index设置为对其他元素没有任何影响。但它没有用。

 <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是一个相对属性，它根据您将元素放入页面的顺序显示索引。

<div>here the z-index is equal to 1</div>
<div>here the z-index is equal to 2</div>

如果你想确定你的z-index被考虑在内，你可以为你的html元素设置一个绝对位置，但是你打破了元素的索引堆栈。

对于您的案例中的样本，如果您想这样做，您的.dropdown仍然高于您可以执行的所有其他元素：

.dropdown {
position: absolute;
z-index:999999999999;
float: right;
text-align: right;
}

但是它也将以相对元素位置运行，并且在这种情况下你必须小心撞击，因为你打破了“z-index堆栈”。一个建议是，根据您的设计设置所有元素影响的所有z-index。

Answer 2

首先，我将您的代码置于嵌入并添加一些样式以查看您的btn。其次，我通过将position:relative替换为position:absolute

来修复您的错误

＆＃13;

$(".dropbtn").on("click", function(){
   $(".dropdown-content").toggle();
});

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

z-index不能在我的菜单上运行

2 个答案: