sticky/fixed 元素后面的绝对元素

Question

我有一个简单的 Dropdown 和右边的粘性容器。下拉列表一直在粘性容器后面：

我试过了：

将右侧容器更改为固定位置
更改两个 div 的 z-index

然而，这些都不起作用。这是my codepen

绝对位置的下拉菜单是article-actions-dropdown-content 粘性容器是 right-sidebar-container.

粘性元素：

.right-sidebar-container {
    height: 550px;
    width: 98%;
    background-color: red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 20%;
    margin-top: 10px;
    position: sticky;
    margin-bottom: 20px;
    transition: 0.5s;
}

绝对元素：

.article-actions-dropdown-content {
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    min-width: 160px;
    overflow: auto; 
    border: 1px solid #ebebeb;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.1s ease-in;
    overflow: hidden;
    visibility: hidden;
}

Answer 1

尝试将 z-index: 1 添加到具有 class article-actions-dropdown-wrapper 的元素。即，

.article-actions-dropdown-wrapper{
  z-index: 1
}

Answer 2

在你的 codopen 上试过，下拉菜单嵌套在已经嵌套的包装器中，只需应用 z-index:1000;在 .article-actions-dropdown-wrapper 和 z-index:0 上；在 .right-sidebar-container

z-index 用于开始嵌套元素的单位计数 100 或 10（不记得）单位与更高的单位相比，您必须插入更高的数字

Answer 3

您应该为 class 选择 z-index:1。article-actions-dropdown-content 因为它会优先显示粘性菜单。

sticky/fixed 元素后面的绝对元素

Absolute element going behind sticky/fixed element

html

javascript

css

css-position