💡
原文中文，约1900字，阅读约需5分钟。
📝
内容提要
在精弘的图床开发中，el-image与el-table冲突，导致图片预览层被表格内容覆盖。问题源于z-index和层叠上下文，el-table单元格的position: relative生成多个低优先级上下文。解决方案是将单元格的position改为static，或使用el-image的preview-teleported属性，将遮罩层插入body以提高优先级。
🎯
关键要点
- 在图床开发中，el-image与el-table发生冲突，导致图片预览层被表格内容覆盖。
- 问题源于z-index和层叠上下文，el-table单元格的position: relative生成多个低优先级上下文。
- 解决方案是将el-table单元格的position改为static，避免生成新的层叠上下文。
- Stacking Context决定了元素的显示优先级，z-index值越高的元素在同一上下文中越靠上。
- 对于z-index值相同的上下文，HTML文档中位置靠后的元素优先级更高。
- el-image的遮罩层被困在低优先级的Stacking Context中，导致被后面的表格内容覆盖。
- 将el-image的preview-teleported属性设置为true，可以将遮罩层插入到body中，确保其优先级最高。
❓
延伸问答
el-image和el-table冲突的原因是什么？
冲突源于el-table单元格的position: relative属性生成多个低优先级的层叠上下文，导致el-image的遮罩层被表格内容覆盖。
如何解决el-image被el-table覆盖的问题？
可以将el-table单元格的position改为static，或者将el-image的preview-teleported属性设置为true，以提高遮罩层的优先级。
什么是Stacking Context？
Stacking Context是决定元素显示优先级的机制，z-index值越高的元素在同一上下文中越靠上。
z-index在Stacking Context中的作用是什么？
z-index值决定了同一Stacking Context中元素的显示顺序，值越高的元素优先显示。
el-image的preview-teleported属性有什么作用？
该属性可以将el-image的遮罩层插入到body中，从而确保其优先级最高，避免被其他元素覆盖。
为什么el-table的cell设置为relative会导致问题？
因为设置为relative会生成新的Stacking Context，使得每个单元格的z-index都为1，导致后面的元素优先级高于el-image的遮罩层。
➡️
