iOS中多个position:fixed中z-index失效导致的坑

最新推荐文章于 2024-04-16 10:24:53 发布
最新推荐文章于 2024-04-16 10:24:53 发布
阅读量1w 收藏 2
点赞数 1
分类专栏： 个人解惑 知识学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zilvzsy/article/details/86022612
版权

记笔记，免忘记！ios苹果手机，多个position:fixed导致层级关系失效，弹窗无法显示。怎么调试都无法实现，部分苹果手机不会出现此问题。

首先，排除了浮动等会导致出现这个问题的情况。后网上百度了下，说是 从父原则 但是我按照这篇文章的说法修改样式js还是无效。因为是z-index属性失效导致了该问题，如下是正确解决了我此时的问题的方法

方法一：

页面上加上 iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致苹果上z-index属性失效，安卓正常

将弹性滑动属性的css全局样式-webkit-overflow-scrolling: touch去掉后z-index属性正常。

方法二：写js弹窗出现时，隐藏上层层级的div【底部菜单】;弹窗取消时，显示上层层级的div【底部菜单】

 

zilvzsy
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
深入探究iOS下fixed定位导致的问题
weixin_34198881的博客
08-04 2207
讨论背景 众所周知，fixed元素在IOS下的表现是糟糕的，fixed元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚（如：页面滚动，fixed元素与页面相互分离；页面滚动，fixed元素消失等）。这些表现过于离奇，显得没有逻辑，一时间很难找到对应的解决方案。所以笔者决定从一个简单列表页出发，把遇到的各种奇怪问题都罗列出...
关于z-index 层级显示 ios端不生效问题。
01-03
项目构建 webpack + vue + vue-router + vueX + axios + antd of vue 起因 构建项目的时候由于 采用的 antd of vue ui库 ，里面没有类似点击唤醒遮罩层的组件 ，所以自己手写vue组件进行引入 ，主要用的是 css3 z-index 属性 ，通过z-index 值不同进行层级展示。（ ps ：之前处理过类似需求 ，由于用的是vant-ui）里面有自带的组件 所以就引入直接拿来用了。 经过 自认为写的写的代码上面逻辑是没有错误的，可结果却是 以下 。。。。 出现弹窗的时候，滑动底部z-index 属性不起作用。 更令人无语的
苹果手机 iOS 系统 ，使用scroll-view会把scroll-view里包裹的遮罩层截断失效，（苹果手机、ios系统使用scroll-view，fixed定位层级不正确）
最新发布
m0_55074611的博客
04-16 521
苹果手机 iOS 系统 ，使用scroll-view会把scroll-view里包裹的遮罩层截断失效，（苹果手机、ios系统使用scroll-view，fixed定位层级不正确）因为 iOS 下加了 -webkit-overflow-scrolling: touch，这个会产生滚动惯性，体验更好，但会改变 fixed 的行为；解决方法一：把需要fixed定位的元素放在scroll-view外面，方法二：在**全局**（注意是在全局文件中）app.vue中 写入 ，方法三：使用scroll-view中包裹的
position ： fixed z-index 失效
tao__f的博客
02-24 968
如图： 登录组件fixed 显示在上层 bug： 父组件设置了fixed 而登录组件（子组件）z-index无论设置多大都没效果 解决： 父组件设置z-index so，请注意下面两点： z-index只有在设置了position为relative,absolute,fixed时才会有效。 z-index的“从父原则”。当你发现把z-index设的多大都没用时，看看其父元素是否设置了有效的z-index，当然别忘了先看看自身是否设置了position。 ...
IOS上z-index和fixed定位无效
godming的博客
05-08 250
工作中偶然遇见IOS上z-index失效了，后来查阅资料，最终解决了，在元素上加上： -webkit-transform:translateZ(1px); -moz-transform:translateZ(1px); -o-transform:translateZ(1px); transform:translateZ(1px); 即可解决
苹果手机 z-index 失效
青云码上的博客
05-13 797
原因： 在苹果手机上， transform变换的时候会让z-index“临时失效”，其实并非z-index失效了，只是z-index被用在不同的 stacking context 上，而非在默认的 context 上同等地比较层级了。所以 DOM 在transform的工程中，DOM 处于一个新的 stacking context 里，z-index也是相对于这个 stack...
Safari 定位fixed下，z-index层级失效问题
Jensonhui's Blog
09-20 4869
在Safari浏览器下，此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari浏览器，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的3D视角进行渲染。 解决方案： 方法1： 父级...
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案 iOS 中 position:fixed 吸底时的滑动出现抖动是前端开发中常见的问题之一。这个问题的出现主要是由于 native 和 h5 两个原因引起的抖动。native 的抖动是...
CSS 定位之 z-index 问题分析
01-19
position值为非static时，如果不设置z-index属性，IE6/7下z-index默认为0，而IE8及以上浏览器z-index为auto，且zindex:auto的元素不参与堆叠优先级比较。 ff/chrome z-index IE6/7 IE8/9 不设置 0 auto au
解决CSS中子元素z-index与父元素兄弟节点的层级问题
01-19
写了一个平铺的列表，其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框内容优先展示。 元素的结构大致如下： 列表项1 弹出框1 列表项2 </div>
ios-byteBuffer:在objective-c中重写一个类
05-19
ios-byteBuffer [！[CI状态]（ Lee / ios-byteBuffer.svg？style = flat）]（ Lee / ios-byteBuffer ） 用法 ＃分配 ByteBuffer *buffer = [ByteBuffer initWithOrder: ByteOrderLittleEndian]; ＃输入数据 - ( ...
ios端 z-index不生效问题
weixin_47541876的博客
05-07 3580
安卓使用z-index层级没有问题，但在ios端不生效，比如多个模态框使用z-index时，高层级的z-index始终不能覆盖上来 解决办法： 在该元素上添加如下css样式 transform:translateZ(1px); 给某元素设置层级时可同时设置z-index和translateZ， Android和ios互不影响。 ...
z-index 在 iphone ios 无效的bug
高先生的猫
02-25 841
场景重现:在微信开发者工具可以正常显示,在安卓真机手机可以正常显示,在ios手机真机无法正常显示，虽然内容有，但是看不见 原因:子元素position:fixed;父元素position:fixed;，只需要将父级的fixed去掉或者子级的fixed去掉即可 ...
IOS下z-index失效问题
ruanhongbiao的专栏
07-12 3943
一.zindex和transform translateZ冲突问题 1.在android上，如果对元素同时设置zindex和transform translateZ的值时，在显示上zindex的优先级要高于translateZ 2.在ios上，则相反，translateZ的优先级要高于zindex 3.所以最好在设置一系列元素时，zindex的值和translateZ的值应该一起逐级增长或逐...
在ios上z-index不起作用问题的总结
时清云的博客
01-11 1165
最近在维护一个H5老项目时，遇到一个问题，就是在ios上z-index不起作用，在安卓上样式都是好的。项目的架构组成是vue2.x + vux + vuex + vue-router等用的UI组件库是vux在页面中有一个功能点，就是点选择公司列表的时候，会出现这个页面上面浮现一个a弹框页面，这个a弹框页面里面有搜索框，可以输入公司名进行搜索，然后出现公司列表，点击其中的一个公司，就算进行选择了。主要是基于vux这个UI组件库的特性造成了这个问题；基础代码如下：
解决移动端fixed布局ios样式问题
weixin_42790916的博客
05-30 882
https://blog.csdn.net/wangpf1992/article/details/53078901
解决IOS底部fixed定位失效问题
oneyJiang
06-11 9032
html&lt;body&gt; &lt;!-- fixed定位的头部 --&gt; &lt;div class="header"&gt; &lt;/div&gt; &lt;!-- 可以滚动的区域 --&gt; &lt;div class="main"&gt; &lt;div class="cont
记录一次ios下fixed区域中滚动内容滑动到底部/顶部后不可滑动的问题修复
u012439689的博客
12-31 3050
如题，ios多机型，h5的页面制作的一个展示列表，外部采用fixed布局固定显示了表头筛选项的一些东西，然后中间是内容可滚动区，如下图，然后ios的机型会出现的问题就是，滚动到顶部或者底部再用力划一下的话（等到内部滚动区域滚动条消失），滚动就会被卡住，滚不动了 ...
iOS手机定位层级问题
qq_37587135的博客
10-11 917
iOS手机定位层级问题现象来源 现象 在iOS手机app内或者Safari浏览器中定位的元素设置很高的层级eg:9999, 想实现的最上层的效果，例如代码： <div style="position: relative"> <div style="position: relative" class="top"> <div></div> &l...
ios 16.3 以上系统 position:fixed 不固定，怎么解决
06-02
在 iOS 16.3 以上的系统中，确实存在 `position: fixed` 不固定的问题。这是因为在这个版本中，苹果对于 `position: fixed` 的实现方式进行了更改，导致部分页面上的 fixed 元素无法固定在指定位置。 为了解决这个问题，可以尝试以下几种方法： 1. 使用 `-webkit-overflow-scrolling: touch` 属性来启用 iOS 上的滚动优化。这个属性会启用硬件加速和平滑滚动，可以提高页面滑动的性能。这个属性对于一些情况下的 fixed 元素可以起到固定的作用。 ```css .container { overflow: scroll; -webkit-overflow-scrolling: touch; } ``` 2. 将 `position: fixed` 改为 `position: sticky`。sticky 定位是一种新的定位方式，实现上与 fixed 定位类似，但是不会一直固定在页面上，而是在特定位置停止固定。需要注意的是，sticky 定位在一些旧的浏览器版本中可能不被支持。 ```css .fixed { position: sticky; top: 0; } ``` 3. 使用 JavaScript 来实现 fixed 元素的固定。可以通过监听 `scroll` 事件，然后动态改变 fixed 元素的位置来实现。 ```javascript var fixedEl = document.querySelector('.fixed'); window.addEventListener('scroll', function() { if (window.scrollY > 100) { fixedEl.style.position = 'fixed'; fixedEl.style.top = 0; } else { fixedEl.style.position = 'relative'; } }); ``` 希望以上方法能够帮助你解决 iOS 16.3 以上系统中 fixed 元素不固定的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值