下拉菜单位于其他标签后面

Question

我想在不使用 select 的情况下创建一个下拉菜单，但问题是下拉菜单位于其他标签后面 我不知道该怎么办

下拉菜单在这里

        <div class="dropdown">
            <div><button class="dropdown_btn">Category</button></div>
            <div class="drop">
                <a href="#" class="a_none_d">All cate</a>
                <a href="#" class="a_none_d">cate 1</a>
                <a href="#" class="a_none_d">cate 2</a>
                <a href="#" class="a_none_d">cate 3</a>
            </div>

和CSS：

.dropdown{
    display: inline-block; 
    position: relative; 
    margin-left: 10px;
    transition: all 0.3s; 
}
.drop{
    align-items:center;
    border-radius: 10px;
    display: none;
    position: fixed;
    width: 65px;
    overflow: none;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}
.drop a:hover{
    color: #FFFFFF;
    background-color: red;
}
.dropdown:hover .drop{
    display: block;
}

完整代码在这里：

Answer 1

为了确保您的下拉列表显示在其他元素之上并且不会隐藏在它们后面，您可以增加下拉容器的 z-index 属性。 z-index 属性控制定位元素的堆叠顺序。

这是您当前的 HTML 代码：

<div class="dropdown">
    <div><button class="dropdown_btn">Category</button></div>
    <div class="drop">
        <a href="#" class="a_none_d">All cate</a>
        <a href="#" class="a_none_d">cate 1</a>
        <a href="#" class="a_none_d">cate 2</a>
        <a href="#" class="a_none_d">cate 3</a>
    </div>
</div>

这是您更新的 CSS 代码：

.dropdown {
    display: inline-block; 
    position: relative; 
    margin-left: 10px;
    transition: all 0.3s; 
    z-index: 1; /* Add this line to set the z-index */
}

.drop {
    align-items:center;
    border-radius: 10px;
    display: none;
    position: absolute; /* Change this to 'absolute' */
    top: 100%; /* Add this line to position the dropdown below the button */
    width: 65px;
    overflow: none;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2; /* Add this line to set the z-index */
}
.drop a:hover{
    color: #FFFFFF;
    background-color: red;
}
.dropdown:hover .drop{
    display: block;
}