ios苹果手机position：fixed的兼容性以及无法定位到全局的问题

2024-05-14 14:25:33

position：fixed定位问题

首先大家知道position：fixed；这个css属性在任何环境下都有可能会被阻断，也就是无法作用于全局。包括：transform / perspective / filter

也就是说，当父级元素中有含上面几个css属性的时候，你写的模态框，透明背景等等，就不能覆盖整个屏幕了。

例如：
可以试试在父级加入下面的css：那么fixed的范围就是加入这个属性的元素

transform: translateZ(0);
-webkit-transform: translateZ(0);

IOS系统中：

ios5以上的手机确实兼容了position:fixed，
但是对于上面说到的三个，ios不论什么浏览器还会被下面这个属性阻断：
overflow:scroll;
所以要想我们在项目中的遮罩蒙版等作用于整个屏幕，要将其所有的父级元素css中的overflow置为visible，但是这又是不现实的。

解决办法

简单粗暴的，用js控制下
document.getElementById(‘xxx’).style.overflow= ‘visible’
document.getElementById(‘xxx’).style.overflow= ‘scroll’
根据业务逻辑去处理一下，
或者就是创建根节点挂在app或者body上
暂时还没想到其他更好的办法

参考链接:

谈一谈苹果手机关于position:fixed的兼容性
ios position: fixed 问题
CSS position: fixed absolute失效问题

ios苹果手机position：fixed的兼容性以及无法定位到全局的问题相关推荐

position: fixed如何相对父元素定位
在项目中遇到一个问题,项目中有一个弹框,弹框中有一个anchor组件,弹框中的内容可以滚动,而anchor组件需要相对于弹框保持固定.我们知道,position: fixed是相对于浏览器窗口进行定位 ...
CSS position: fixed 相对于父元素定位
使用 fixed 进行布局的元素,在一般情况下会相对于屏幕视窗来进行定位.但是如果父元素的 transform, perspective 或 filter 属性不为 none 时,position为f ...
ios position: fixed 问题
为了解决卡顿的问题, 添加了如下代码 -webkit-overflow-scrolling: touch; 但是在ios上发现,利用fixed进行底部固定,出现bug 具体现象是: 在我滚动的时候,原 ...
不要乱用position:fixed
经常会有一个需求,在一个固定窗口内容滚动,底下有操作按钮需要固定,不随着滚动,一般第一个念头就是用固定定位position: fixed,但是fixed是以窗口为父元素去定位的,这么做肯定是错的,需要 ...
position:fixed实现相对于父级定位
position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...
position:fixed 实现相对于父元素定位
position:fixed 实现相对于父元素定位比如:中间内容区域的大小固定为1000px,对应不同的浏览器宽度,要使得某一个资源子固定在相对于内容区域的某一个位置,就不能使用 left:xxx, ...
position fixed 在ios上滚动不固定问题
今天项目上用position: fixed时,谷歌浏览器没有问题,但是到ios上就出现了滚动时position: fixed跟动着滚动的问题.怎么解决呢在position: fixed元素上添加下面 ...
ios fixed定位后内容不显示_记录CSS中 position:fixed 踩的坑
在 html 页面的css样式中,如果将 position 属性的值设置为 fixed,那就表示其元素的位置相当于显示设备的可视区域进行定位,而今天在调试此属性时,却发生了一件奇怪的事件. posit ...
ios 弹起软键盘position: fixed；失效
<view class="stores-top"> <input type="text" placeholde ...

最新文章

热门文章