vue中组件叠加显示

- 日理万妓 2023-09-30 10:13 16阅读 0赞

`提示：只提供简单可行的方案，没有深入研究，本意是记录一下成果`  
假设A组件要叠加在B组件上显示，效果如下图：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16]  
我们只需要将A组件进行如下设置：

1.  设置A组件的宽高，使用px为单位  
    ![在这里插入图片描述][852b575cc6c642a0a88af5401eb1d007.png]
2.  A组件与B组件只作为首页的一部分进行引入显示，所以在首页vue文件，再对A组件进行设置，关键点：
    
    1.  使用absolute进行绝对定位，自行设置该组件显示在哪里
    2.  z-index：可以理解为叠加显示的优先级，数值高的叠在数值低的上方显示  
        ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_12_color_FFFFFF_t_70_g_se_x_16]
3.  如果只存在两个组件叠加显示，则被叠加的组件无需进行设置

最后可参考如下文章：  
[《CSS如何控制 2个div 的 部分 重叠在一起 并将其中一个div的内容固定显示在上层》][CSS_ 2_div _ _ _ _div]  
[《HTML中元素的定位方式》][HTML]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/dcfec1dd9dcd47fb8a3fe15d143d2fa7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[852b575cc6c642a0a88af5401eb1d007.png]: https://img-blog.csdnimg.cn/852b575cc6c642a0a88af5401eb1d007.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c98cfa6ac2bf4b7eb7a44c73a05c3d33.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_12,color_FFFFFF,t_70,g_se,x_16
[CSS_ 2_div _ _ _ _div]: https://zhidao.baidu.com/question/198330661.html
[HTML]: https://www.cnblogs.com/ajianbeyourself/archive/2013/12/23/3488321.html