uniapp使用绝对定位被父元素截断问题

最新推荐文章于 2025-04-01 21:00:00 发布

懒得起名字了1024

最新推荐文章于 2025-04-01 21:00:00 发布

阅读量1.7k

点赞数

文章标签： html5 javascript 小程序

本文链接：https://blog.youkuaiyun.com/weixin_42478537/article/details/120554441

版权

在uniapp开发中遇到真机运行时绝对定位受限于父元素的问题，导致弹框显示不全。解决方案是将弹框移至父组件，并用一个position:relative的div包裹预充值和客户数据两部分，扩大弹框的可视区域。通过控制父组件中弹框的显隐，实现子组件问号点击时弹框正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做uniapp开发时真机运行的时候使用绝对定位，会被他限制在他整个的父元素之内。

本来这两块是做了两个子组件，但是，点击问号的时候就会出现上述问题，弹框永远显示不全。

解决方案：将这个弹框移到父组件中，如index.vue 然后使用一个div将这两块包裹起来。这里为什么要将上一块预充值也包括进去呢？因为这样就能扩大弹框的范围，即扩大了弹框所在的父元素范围，上半部分留足了空间，这样弹框就不会被截掉部分。注意这个div一定要加上position: relative;的条件，否则弹框会以整个父组件为父元素

	<div style="position: relative;">
			<!-- 预充值 -->
			<Precharge :tableindex="tableindex"></Precharge>
			<!-- 客户数据 -->
			<menberDate :ind='ind' :tableindex="tableindex" @toNone="toNone" @toUpdate="toUpdate"></menberDate>
			<