el-image 和 el-table 怎么就打架了？Stacking Context 是什么？
内容提要
在精弘的图床开发中，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中，确保其优先级最高。
延伸解读
层叠上下文的影响
在网页设计中，层叠上下文（Stacking Context）对元素的显示顺序至关重要。el-table中每个单元格的position: relative属性生成了多个低优先级的上下文，导致el-image的遮罩层被覆盖。理解这一点有助于开发者在处理复杂布局时，合理设置元素的position属性，避免类似问题。
解决方案的灵活性
将el-table单元格的position改为static是一个有效的解决方案，但并非唯一选择。使用el-image的preview-teleported属性将遮罩层插入到body中，可以确保其优先级最高。这种灵活性使得开发者可以根据具体情况选择最合适的解决方案，提升用户体验。
优先级管理的重要性
在处理多个组件时，优先级管理显得尤为重要。z-index值和元素在HTML文档中的位置都会影响显示效果。开发者应注意在设计时合理安排元素的层级关系，以避免因优先级问题导致的显示错误，确保界面的整洁和功能的正常运行。
延伸问答
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的遮罩层。
