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

Question

请参考下图

下拉列表继续隐藏在表头后面

我检查了不透明度，z-index和everything.Still没有任何反应。

下拉代码（使用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;
}

P.S：我不想删除位置：粘性使下拉列表高于表头。还有其他解决方案吗？

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的顶部NB-任何具有低于99999的z-index值的元素将在.task_stages_list_view-HEAD后面出现给用户