html - z-index 在我的菜单上不起作用

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。