javascript - 绝对元素落后于粘性/固定元素
问题描述
我有一个简单的下拉菜单和右侧的粘性容器。下拉列表一直在粘性容器后面,如下所示:
我试过了:
- 将正确的容器更改为固定位置
- 更改两个 div 的 z-index
但是,这些都不起作用。这是我的密码笔
绝对位置的下拉菜单是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;
}
解决方案
尝试z-index: 1
使用 class 添加到元素中article-actions-dropdown-wrapper
。也就是说,
.article-actions-dropdown-wrapper{
z-index: 1
}
推荐阅读
- postman - Postman 自动将环境变量 Current Value 重置为 null
- parameters - AllJobViewHolder 正在播种以下错误
- python - OpenCV 和自定义多处理
- javascript - 循环遍历 AppleScript 和 JavaScript 中的列表
- vue.js - Vue:为什么只有最后一个对象只与 for 循环中的每个模态相关联
- javascript - ReactJS 修改对象数组的特定属性
- android - 设置 View.INVISIBLE 的可见性在 startAnimation 时不起作用
- optaplanner - Optaplanner 中的学校时间表(TO DO 评论)
- php - 使用php从数据库中获取多个json
- apache-superset - 如何为 Apache Superset 添加两个 TIme 列过滤器?