自定义Dropdown（非select实现）被其他标签遮挡问题求助

你的自定义Dropdown下拉框被遮挡，核心是两个问题导致：

1. 下拉框(.drop)未设置层级(z-index)，容易被其他元素覆盖
2. 使用position: fixed定位不合理，应该基于父元素相对定位，保证下拉框和按钮的位置关联

修改后的CSS代码： #

.dropdown{
    display: inline-block; 
    position: relative; 
    margin-left: 10px;
    transition: all 0.3s; 
    /* 给父容器设置基础层级，避免被其他元素覆盖 */
    z-index: 1;
}
.drop{
    align-items:center;
    border-radius: 10px;
    display: none;
    /* 改为absolute定位，相对于父元素展开 */
    position: absolute;
    top: 100%;
    left: 0;
    width: 65px;
    /* 修正overflow属性，none不是合法值 */
    overflow: visible;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /* 设置足够高的层级，确保下拉框在最上层 */
    z-index: 999;
}
.drop a:hover{
    color: #FFFFFF;
    background-color: red;
}
.dropdown:hover .drop{
    display: block;
}

关键修改说明： #

• 把.drop的position: fixed改为position: absolute，并通过top:100%、left:0让下拉框紧贴按钮下方展开，符合Dropdown的交互逻辑
• 给.drop添加z-index: 999，确保它的层级高于页面其他元素
• 修正overflow: none为overflow: visible（none不是CSS合法的overflow属性值）

原始代码参考： #

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; 
}
.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;
}

内容的提问来源于stack exchange，提问作者parsa ataei