移动端 position:fixed失效问题

最新推荐文章于 2024-03-19 17:28:23 发布
原创 最新推荐文章于 2024-03-19 17:28:23 发布 · 3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#移动端 position:fixed失效问题

本文介绍了一种解决网页中固定定位元素在滚动时失效的方法。通过将非固定定位的元素包裹在一个具有特定样式的div中，可以有效解决该问题。具体做法是设置此div的overflow属性为auto和scroll。

当页面比较长时，滚动页面，发现设置的固定定位失效

发现可以这样子解决

将不是固定定位的其他元素放在一个div中，给这个div设置这样的样式：

.con{
        overflow-x:auto;
        overflow-y: scroll;
    }

一切ok

参考链接：点击打开链接

vue项目移动端position: fixed；不生效原因及解决方案
weixin_42280496的博客
07-22 5816
1.问题描述： 我用vue做的是一个官网，现在要适配移动端。就如大部分的移动端页面那样，顶部有个固定定位的导航栏。我们这个官网在pc状态时也是有的，但是固定定位(position: fixed;)在pc时是没问题的，切换成移动端后，css里写了position: fixed但并没有生效，div还是会跟着滚动轴的滑动而被卷起来。 2.解决问题： ①百度后发现大多的解决方式就是在父或上级或上级上级 … 找有没有设置transfrom这个css属性，如果有的话 把它的值改为none或者直接去掉。【我的项目里没有
position:fixed； 在 android 下无效怎么处理？
qq_38757174的博客
06-20 866
position:fixed; 在 android 下无效怎么处理？ 这个是因为移动端浏览器默认的 viewport 是 layoutviewport，它的宽度大于移动端屏幕，所以页面会出现左右滚动条，fixed 是相对 layoutviewport 来固定的，而不是屏幕，所以会感觉出现 fixed 无效; 处理方法： 改变 viewport 的大小为 idealviewport ...
适配常用代码
Revival_Liang的博客
01-17 379
移动端position:fixed 解决方案
weixin_33847182的博客
03-11 604
相信不少人做移动端项目的时候都会遇到position:fixed 的坑。 下面提供一个解决方法，不用引入任何其他的js库，纯css解决。 解决问题的关键就是：fixed元素内部必须嵌套一个position:absolute元素，用来装载内容，目的就是为了让内容脱离fixed文档流，屏蔽一些fixed的坑 html部分 <!DOCTYPE html> <html...
解决安卓输入框导致webview高度变化，定位失效问题
xiao_shuai_shua的博客
07-29 957
解决安卓输入框导致webview高度变化，定位失效问题
position:fixed 底部展示不全
07-17
用户提供的引用：[^1]、[^2]、[^3]，这些是关于position: fixed的问题，如移动端兼容性、失效原因和宽度问题。用户的问题具体是“元素在底部展示不全”，所以我需要基于这些引用和自己的知识来回答。 关键点： - ...
css 中 position:fixed
04-04
4. **失效问题及解决方案**：引用[4]提到fixed失效的情况，通常是因为父元素的transform属性。需要解释这一点，并给出解决方案，比如使用Vue的teleport将元素移到body下，避免transform的影响。 5. **居中技巧**：...
position: fixed 切换页面的时候 位置发生变化
08-02
此外，移动端浏览器在软键盘弹出时会改变视口高度，导致 `position: fixed` 失效并表现为 `absolute` 定位[^3]。可以通过监听 `resize` 或 `orientationchange` 事件来调整元素位置，或使用 `vh` 单位来保持视口一致...
width: 7%; height: 40px; position:fixed;
最新发布
11-28
1. `position:fixed` 在移动端有哪些常见问题及解决方案？ 2. 如何实现固定定位元素的响应式宽度控制？ 3. CSS百分比宽度相对于父元素还是视口？不同定位方式有何区别？ 4. `transform:translate()` 在定位布局中的...
css中position的定位方式position:fixed，如何不受transform动画的影响
09-09
实际上，只要fixed-element的任意祖先元素有transform（非none），就会导致fixed失效。 重构：将fixed-element移到和.transform-box的父级同一层级，甚至更外层。例如： ```html ...其他内容... ...
fixed定位既然相对于屏幕视口定位，为什么在滚动时不生效
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
03-19 1341
当你设置一个元素为fixed定位时，它的位置会相对于浏览器窗口的可视区域进行计算。因此，无论页面如何滚动，该元素都会保持在固定的位置上，不会随滚动而移动。fixed定位是一种CSS属性，用于将元素相对于浏览器窗口进行定位，而不是相对于其父元素。它会使元素固定在屏幕上的某个位置，不会随页面滚动而改变位置。示例，给搜索框固定在网页上方，但是在鼠标向下滚动时，搜索框会消失。这是内容区域的z-index比搜索框 默认的z-index大。给搜索框坐在样式加上较大的z-index即可。
position:fixed不起作用
weixin_43911260的博客
11-26 1006
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体...
Android 2.3 WebView bug 之 position:fix
墟
10-27 6151
最近在 Android 2.3 上做一个小应用，native / web 混合，用了一个 WebView 做内容主要显示区域。用了 jQuery Mobile 的列表和内置的搜索功能。那个搜索框在列表最顶端，当列表向上卷动的时候，搜索框会跟随一起卷动出屏幕顶端。客户看了 demo，表示「这个东西很好啊，要是能停留在顶部就更好了」。之后发生的事情如下： 1、设置 position:fix 以及修正
position:fixed失效
sunshine的博客
03-30 1760
position：fixed可以使某个标签内容固定在页面的某个位置，不随浏览器滚动条而滚动，使用方法为： position:fixed; top:0; left:0; bottom:0; right:0; 但父级元素的属性有transform时，position:fixed的作用就失效了。所以尽量使用position：absolute代替position：fixed的作用。具体怎么用稍后更
项目中遇到的position:fixed;无效问题
WEBwriter的博客
04-11 7285
今天入了个小坑，底部元素设置position:fixed;没有效果的问题，查了很久才发现原来原因。如果一个元素设置了position:fixed;其父元素设置了tansform属性的话，不管是scale()、rotate()、还是translate()，其fixed值都会失效，直接会使position:fixed;变成position:absolute;的效果。所以，我们fixed的元素的父级有t...
android6.0定位失败,Android6.0（Api23）以后 WebView定位失效问题
weixin_42505462的博客
05-26 523
Android WebView 加载网页url中，H5通过js获取位置定位信息。/*** 地图相关*/window.init = function() {var map = new AMap.Map('mapContainer', {resizeEnable: true,zoom: 14});/*获取实时定位*/map.plugin('AMap.Geolocation', function() {...
positon:fixed定位失效
FEE
02-14 1459
positon:fixed---绝对定位 元素将相对于屏幕视口（viewport）的位置来指定其位置，并且元素的位置在屏幕滚动时不会改变。 fixed 属性会创建新的层叠上下文（Stacking Context）。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。 Stacking Context---层叠上下文 层叠上下文是HTML元素的三维概念，这些HTML元素...
fixed在移动端的坑
Running_FE的博客
05-13 2968
fixed在某些情况下可能导致容器内的子元素的1px边框线消失，即使使用z-index也无法解决。解决方法：可以使用translateZ属性来解决fixed定位的容器内不能带有input，这是常见的bug。解决方法： 在input聚焦的时候去掉fixed定位状态，改为absolute。fixed＋可滚动的容器内会导致fixed定位的子元素在滚动时定位失效，滚动完成后才正常回到fixed的位置。解决...
elementUi——table 设置列为fixed后，页面切换时导致错位问题(亲测有效)
yehaocheng520的博客
06-24 7868
今天测试给我提了一个布局问题：效果图如下： 他的测试方式比较奇葩，是不停的切换上面的标签页，然后就出现了上图的错位问题。 百度后发现也有其他人提到这个错位问题： 不过他们的错误基本是表格数据改变时，表格错位。 所以解决办法是： 思路就是：watch监听表格数据的变化，如果变化，则重新渲染表格。 watch: { tableData(val) { this.doLayout(); } }, methods:{ doLayout() { this.$next
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值