fixed布局的坑

本文探讨了fixed布局带来的挑战,包括子元素滚动问题、transform属性影响定位以及苹果低版本微信浏览器二维码识别障碍。提供了具体解决方案,如调整父元素overflow属性和避免transform属性干扰。

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

本篇试图记录所有fixed布局所带来的坑的解决方案:

 

1、fixed布局父元素导致子元素无法滚动的问题

(1)水平,给父元素样式加上

  left: 0;
  right: 0;
  overflow-x: scroll;
  overflow-y: hidden;
 
(2)竖直,给父元素样式加上
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
 
 
2、在父元素transform属性不为none时,其子元素的fixed定位会失效。原因是子元素的相对定位由原本的视区变为了父元素。
 
3、页面使用fixed布局会导致低版本苹果手机上微信浏览器无法识别二维码。
 

转载于:https://www.cnblogs.com/cheeseCatMiao/p/10307494.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值