fixed在移动端的坑

Running_FE Running_FE 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 3k累计阅读 3k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄9年
关注
转载 最新推荐文章于 2026-03-09 00:52:10 发布 3k 阅读 AI 写同款· GEO 优化 ›
R语言数据分析从入门到实战：基于Tidyverse的完整学习路径 R语言作为专为统计计算和图形显示设计的编程语言，其核心优势在于强大的数据处理能力和无与伦比的可视化系统。其工作原理基于向量化操作和丰富的扩展包生态，尤其通过Tidyverse这一现代数据科学工具集，实现了数据操作的连贯性与高效性。这一技术价值在于将数据分析从零散的语法学习，整合为从数据导入、清洗、探索、建模到可视化的标准工作流，极大地提升了分析效率与可重复性。在应用场景上，R语言广泛应用于统计建模、探索性数据分析和专业级数据可视化，尤其适合需要快速进行数据探索和生成统计报告的业务分析、学术研究等领域。本文聚 阅读详情

  1. fixed在某些情况下可能导致容器内的子元素的1px边框线消失，即使使用z-index也无法解决。
    解决方法：可以使用translateZ属性来解决

  2. fixed定位的容器内不能带有input，这是常见的bug。
    解决方法： 在input聚焦的时候去掉fixed定位状态，改为absolute。

  3. fixed＋可滚动的容器内会导致fixed定位的子元素在滚动时定位失效，滚动完成后才正常回到fixed的位置。
    解决方法：尽量不要在可滚动的容器内包含fixed定位的子元素。

  4. ios不支持onresize事件

移动端H5开发避坑指南：除了resize监听，还有哪些方法能搞定键盘与fixed布局的‘打架’问题？ 本文深入探讨移动端H5开发中键盘弹起引发的布局问题，提供多种解决方案包括视口监听、Absolute定位、现代CSS及跨端框架适配。特别针对iOS与Android系统的视口机制差异，给出场景化选型指南和进阶技巧，帮助开发者有效解决fixed布局与键盘冲突的难题。 阅读详情

相关推荐

YOLOv11垃圾检测实战：从零搭建带GUI的智能分类系统（附完整数据集）

本文详细介绍了如何从零开始构建一个基于YOLOv11的智能垃圾检测系统，并集成图形化界面。内容涵盖数据集构建与增强、模型选型与轻量化改进（如引入注意力机制），以及使用PyQt5开发稳定GUI的完整流程，旨在解决实际部署中精度与速度的平衡问题，为环保科技等应用场景提供可落地的解决方案。

647

解决Web移动端Fixed布局的方案（防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js）

一些细节处理 在细节处理上，其实还有很多要注意的，挑几个实际遇到比较大的问题来说一下： 有时候输入框 focus 以后，会出现软键盘遮挡输入框的情况，这时候可以尝试 input 元素的 scrollIntoView 进行修复。在 iOS 下使用第三方输入法时，输入法在唤起经常会盖住输入框，只有在输入了一条文字后，输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时

我的博客 1万+

基于传输门与传输管逻辑的全加器设计

全加器是指对输入的两个二进制数相加（A与B）同时会输入一个低位传来的进位（Ci-1），得到和数（SUM）和进位（Ci）。一位全加器可以处理低位进位，并输出本位加法进位。由于这种晶体管的漏极和源极完全可以互换使用，因此这种电路的输入端与输出端也可以互换，这就是具有信号传输双向特性的传输管。传输管的输入信号可以传输到输出端，同时输出端的信号也可以传输到输入端。半加器是指对输入的两个一位二进制数相加（A与B），输出一个结果位（SUM）和进位（C），没有进位的输入加法器电路，是一个实现一位二进制数的加法电路。

qq_40353731的博客 4385

zelement-ui table中有fixed列后出现高度不对最后一行有灰线的问题

最后一列为fixed属性时，高度会出现未占满父元素的整个高度，因此会出现一条灰线 解决方法： 在标签上加一个class=“table-fixed”，尽量保证不影响别的样式 在样式文件中增加如下css代码（利用样式穿透） .table-fixed { /deep/ .el-table__fixed-right { height: 100% !important; //设置高优先，以覆盖内联样式 } /deep/ .el-table__fixed { height: 100% !

weixin_45747619的博客 814

Windows Pychram部署Unet++过程

windows系统 在pycharm平台上配置并跑通Unet网络 这里我用的是B站课程里的资源《唐宇迪Unet图像分割语义分割实战》

ArcGis_Niu的博客 803

从桨叶设计到电机匹配：手把手教你调出无人机最佳动力组合

本文系统介绍了无人机动力系统的核心匹配原则，重点解析了如何通过测试与数据分析，优化螺旋桨与电机的组合，从而显著提升系统力效与续航。文章提供了从参数解读、实战测试到深度调优的完整指南，帮助开发者解决电机过热、推力不足等常见问题，实现无人机性能最大化。

weixin_29305313的博客 242

transform与position:fixed的那些恩怨--摘抄

1. 前言 在写这篇文章之前，我理解的fixed元素是这样的：(摘自CSS布局基础) 固定定位与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与...

weixin_30867015的博客 268

成本150元的高性能RDP协议瘦客户机

云终端市场是一个跨度很大的市场。既有数千元的品牌的瘦客户机，也有几百元的瘦客户机，还有200-300元的支持RDP协议的多用户云终端。但是200-300元的多用户终端，在显示性能上不尽人意，一般用于地产中介门店，工厂产线的电子看板等场合。有没有性能更好，价格更低的方案呢？ 答案是有。 这个方案就是 二手的x86 瘦客户机 + DoraOS瘦客户机系统免费版（仅支持RDP）。 首先我们看硬件，在某宝搜索 升腾C92 ，找到最低配置的（ CPU：J1800，内存：2G，硬盘：8G）。价格都在150以内。

云飞扬的桌面云 7412

transform属性影响fixed定位

偶然的机会发现fiexd定位会受到transform的影响，以下为自己弄的小案例 当外部元素没有transform属性时 -----css部分----- <style> *{ padding: 0; margin: 0; } .transform{ width: 100px; height: 100px; background: rgb(196, 196, 196); /* transform:tra

weixin_45229447的博客 1927

优化dalsa相机检测界面

上节实现了使用qt结合dalsa相机显示检测到缺陷的画面，由于窗口过于简陋，本节将进行一个界面优化。

A1983Z的博客 989

【DRAM存储器三十五】LPDDR4介绍--主要技术特性之VREF training，为什么要做VREF training？

详述DDR4、LPDDR4需要做vref training的原因和训练过程

highman110的博客 2918

移动端onTouchMove事件 以及Fixed定位的坑

就为了一个小特效搞了一天时间！话不多说需求是这样的：在页面上做一个浮动的小图标，可以拖拽移动它。效果是这样的：代码是这样的：大家都知道，移动端拖拽事件主要就是利用touchmove。为了防止拖拽它的时候，禁止浏览器的上下滚动，我的方法是在onTouchStart中将html和body的样式设为 height: 100%; overflow: hidden，然后在onTouchEnd中将样式清空。最...

weixin_33696822的博客 3931

Windows原生环境配置Tensorflow使用GPU

本文讲解如何在Windows原生环境搭建可调用GPU设备进行计算的Tensorflow2.x环境。 区别于WSL，使用Windows原始环境作为开发环境。

天然玩家的博客 1499

移动端踩坑之旅-ios下fixed、软键盘相关问题总结

最近一个项目掉进了移动端的大坑，包括ios下fixed布局，h5唤起键盘等问题，作为一个B端程序员，弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome)，还好这次让我学习了一下相关知识。让我们一起来看一下我怎么挣扎出这个大坑的。 　　一、背景       先看一下要做什么，也就是一个文章评论的版块，下面依次有输入框，点赞，收藏等 。大概长下面这个样子：        

gg464556的博客 1万+

NTscan扫描工具

ntscan是一个扫描器，可以扫描没有密码和弱密码的共享，先到配置文件中填写猜测的用户名和密码，扫描过程中右侧出现的是扫描日志。

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章，有部分习题没有答案，全英文复分析阿尔福斯(Ahlfors) 第三版答案

移动端踩坑之旅-IOS下FIXED、软键盘相关问题总结

最近一个项目掉进了移动端的大坑，包括ios下fixed布局，h5唤起键盘等问题，作为一个B端程序员，弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome)，还好这次让我学习了一下相关知识。让我们一起来看一下我怎么挣扎出这个大坑的。 　　一、背景 先看一下要做什么，也就是一个文章评论的版块，下面依次有输入框，点赞，收藏等 。大概长下面这个样子： ...

dengefu4541的博客 208

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0， 兼容Win7/Win10/WinXP，解压就可用。

移动端采坑：Position- fixed 在Safari上的Bug

Position: fixed 在IOS上的显示效果 会出现两种情况: 点击fixed定位的元素会出现fixed定位失效导致的元素贴向底部，即position: absolute，bottom: 0px;的情况 点击fixed定位的元素，元素向上移，定位生效，位置偏移大 解决方案 - 仅针对Safari 给fixed定位元素设置一个点击事件，在点击事件会调函数中加

baozi213的博客 376

移动端采坑：Position: fixed 在Safari上的Bug

Position: fixed 在IOS上的显示效果 会出现两种情况: 点击fixed定位的元素会出现fixed定位失效导致的元素贴向底部，即position: absolute，bottom: 0px;的情况 点击fixed定位的元素，元素向上移，定位生效，位置偏移大 解决方案 - 仅针对Safari 给fixed定位元素设置一个点击事件，在点击事件会调函数中加入 window.scroll...

weixin_30664615的博客 787

移动端web开发之坑--ios下的fixed问题

话说前几天接到了一个改bug的任务： 【问题】ios用户进入页面时底部悬浮按钮不显示，需要向下滑动，停止滑动后才会显示。【先说一下项目的结构吧】 main.html scripts – stat.js – main.js①由于底部按钮是通过平台配置的，故html中会生成相应的配置对象，只有会通过js遍历后插入页面节点中； ②stat.js 是一个到达页面底部才会被触发，并且只触发一次

screaming_color的博客 3015

移动端踩坑之旅-ios下fixed失效，软键盘等

　　最近一个项目掉进了移动端的大坑，包括ios下fixed布局，h5唤起键盘等问题，作为一个B端程序员，弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome)，还好这次让我学习了一下相关知识。让我们一起来看一下我怎么挣扎出这个大坑的。　　一、背景 先看一下要做什么，也就是一个文章评论的版块，下面依次有输入框，点赞，收藏等 。大概长下面这个样子： 要求也很常...

weixin_34357887的博客 490

uni-app踩坑H5移动端踩坑---fixed的button按钮被popup遮挡

问题： H5页面开发完，在pc端移动页面测试没有问题，但ios手机上弹出层把button盖住了。 解决方法： 把遮罩层popup等弹出界面的代码放到了代码最后。

TATOQOQ的博客 1111

CSS定位不迷路：5种position值实战指南（附避坑技巧）

CSS定位这玩意儿，说难真不难，就五个值；说简单也不简单，背后的文档流、包含块、堆叠上下文能把人绕晕。别急着写代码，先在纸上画画文档流结构图，想清楚谁参照谁、谁脱离谁，再下手。还有，虽然这篇文章全在讲position，但现代CSS布局里，能用flex/grid解决的，就别上absolute。position更像是布局体系的"特种兵"，处理一些特殊场景，而不是主力军。毕竟，代码写得稳，头发掉得少，flex一拉就搞定的事儿，何必搞一堆absolute给自己挖坑呢？

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！ 842

如何解决移动端软键盘弹出后页面布局错乱/按钮被遮挡的问题

移动端软键盘弹出导致页面布局错乱和按钮遮挡问题，根源在于iOS与安卓系统对键盘弹出时的视口处理机制不同。本文从底层机制入手，分析9大高频场景并提供解决方案： 按钮遮挡问题：通过监听resize事件动态调整fixed按钮位置，避免被键盘覆盖； vh单位滥用：替换为自适应高度方案，防止安卓视口压缩导致的布局崩塌； 弹窗内按钮：改用相对定位和内部滚动，确保按钮始终可见； iOS回落延迟：通过blur事件延迟重置按钮位置； absolute定位：采用padding-bottom占位替代固定高度。 布局错乱问题的解决

那些看似不起波澜的日复一日，会在某天让你看到坚持的意义 985
上一篇： Array.Prototype.slice的内部实现
下一篇： class的私有方法跟公有方法
点赞 1
评论 0
书签 书签 1
Running_FE
Running_FE
博客等级 码龄9年 14粉丝 25原创
+ 关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值