css z-index不生效问题排查 element-plus@2.3.7 imgae组件图片预览被遮住

如图所示:


image.png

在el-table中使用el-image组件图片预览时,由于父元素单元格z-index=1(如下图),z-index 属性值相同,则后定义的元素会覆盖前面定义的元素。所以后面的会覆盖el-image的图片预览图,出现如上图所示


image.png

element-ui时把组件append-to-body添加到body同级避免出现层级问题,element-plus@2.3.7该el-image组件渲染在当前标签位置,未放在body下
临时解决办法:修改通过参数cell-style属性,判断相应单元格,修改z-index=auto(使其跟父级同层)
image.png
image.png

参考:
1.mdn: 层叠上下文 - CSS:层叠样式表 | MDN (mozilla.org)
2.当 fixed 定位遇上 z-index 时 - 简书 (jianshu.com)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容