Question

请参考下图

下拉列表一直隐藏在表格标题的后面

我检查了不透明度，z-index和所有内容。仍然没有任何反应。

下拉菜单代码（伪下拉菜单由div组成：

.content_dropdown{
    max-height: 120px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-radius: 5px;
    padding: 0px 0px 0px 0px;
    background-color: white;
    box-shadow: 0 0.25em 0.75em rgba(0,0,0,.3);
    border: 1px solid #009cff;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    position: relative;
    width: 100%;
    margin-left: -1px;
    margin-top: -3px;
    max-height: 154px;
}

表头的代码：

.task_stages_list_view-HEAD{
    border-width: 1px;
    border-color: rgb(230, 231, 235);
    border-style: solid;
    min-height:42px;
    width: 1695px;
    display: block;
    position: sticky;
    top: 0px;
    z-index: 99999;
}

PS：我不想删除position：sticky以使下拉列表位于表格标题上方。还有其他解决方案吗？

Answer 1

在您的代码中.content_dropdown和.task_stages_list_view-HEAD都是定位元素，您需要在两个选择器中使用z-index属性为它们提供适合您实际需要的堆栈上下文既然有

.task_stages_list_view-HEAD{
...
z-index: 99999;
...
}

您需要在z-index中声明一个.content_dropdown属性，该属性应高于.task_stages_list_view-HEAD中的属性尝试

.content_dropdown{
...
z-index: 100000;
...
}

因为具有.content_dropdown的元素具有较高的z-index且位于.task_stages_list_view-HEAD的顶部，所以它看起来更靠近用户。注意：任何z-index的值小于99999的元素都将显示在.task_stages_list_view-HEAD的后面

隐藏在表格中div后面的下拉菜单

1 个答案: