css fixed定位被transform影响的问题

21 篇文章 0 订阅
当fixed定位的元素嵌套在使用transform的盒子中时,其定位可能会被降级为absolute。为了解决这个问题,文章提出了一种方法,即把定位元素作为Vue子组件,在子组件的mounted钩子中利用$nextTick确保DOM渲染完成后,将该元素添加到body末尾,从而保持fixed定位效果。
摘要由CSDN通过智能技术生成

fixed定位嵌套在transform的盒子中时会被强行降为 absolute

这种情况下只能将写有定位的盒子摘出来 但是有时候必须嵌套在一起

我们可以将需要定位的盒子摘出来写成子组件
然后在子组件的mounted钩子函数中写入以下代码

	this.$nextTick(() => {
			const body = document.querySelector("body");
			if (body.append) {
				body.append(this.$el);
			} else {
				body.appendChild(this.$el);
			}
		});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值