首页 前端知识 解决fixed定位z-index层级无效问题

解决fixed定位z-index层级无效问题

2024-06-01 10:06:45 前端知识 前端哥 287 208 我要收藏

问题

当fixed定位元素的DOM层级较深时,z-index会受到层叠上下文的影响,无论z-index设置多大,都无法超过父元素的层级

方案一

将fixed元素放到外层,避免受到层叠上下文的影响

方案二

使用UI组件提供的指定挂载位置配置,修改fixed元素在DOM结构中的位置

例如vant的popup组件

 方案三

如果是自定义组件,以vue为例,可以在组件加载时修改组件的挂载位置

mounted() {
  const _dom = document.querySelector('body');
  // 将当前组件挂载到body下的最后
  _dom.insertBefore(this.$el, _dom.lastChild);
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10466.html
标签
评论
发布的文章

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

HTML5基础2

2024-06-07 23:06:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!