css z-index不生效问题排查 element-plus
2023-07-04 本文已影响0人
哈哈我爱你
如图所示：
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)
