IOS下z-index失效问题

最新推荐文章于 2025-05-13 09:22:56 发布
原创 最新推荐文章于 2025-05-13 09:22:56 发布 · 4k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #z-index #ios

博客主要讲述了CSS相关问题及解决办法。一是z-index和transform translateZ在Android和iOS上存在冲突，显示优先级不同，设置元素时二者值应逐级增减；二是全局样式中-webkit-overflow-scrolling: touch可按需添加；三是多个position:fixed中z-index失效，可用div包裹元素并设置该样式解决。

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

一.zindex和transform translateZ冲突问题

1.在android上，如果对元素同时设置zindex和transform translateZ的值时，在显示上zindex的优先级要高于translateZ

2.在ios上，则相反，translateZ的优先级要高于zindex

3.所以最好在设置一系列元素时，zindex的值和translateZ的值应该一起逐级增长或逐级减少

二.在全局样式中设置了-webkit-overflow-scrolling: touch，把这条样式注释掉，在需要滑动的地方比如弹窗再加上这条样式

三：多个position:fixed中z-index失效

把多个要position:fixed的元素用div包起来，在这个div设置position:fixed就好了

uniapp ios scroll-view中z-index失效的问题
weixin_53236070的博客
10-28 843
uniapp ios scroll-view中z-index失效的问题
css的z-index、position、overflow属性混合时Safari的兼容问题，fixed定位+z-index同时使用不生效问题
止喜的博客
07-24 1795
～～～转前端啦～～～ 问题：position: fixed和z-index同时使用在Safari浏览器中不生效？？？
关于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上z-index不起作用问题的总结
时清云的博客
01-11 2226
最近在维护一个H5老项目时，遇到一个问题，就是在ios上z-index不起作用，在安卓上样式都是好的。项目的架构组成是vue2.x + vux + vuex + vue-router等用的UI组件库是vux在页面中有一个功能点，就是点选择公司列表的时候，会出现这个页面上面浮现一个a弹框页面，这个a弹框页面里面有搜索框，可以输入公司名进行搜索，然后出现公司列表，点击其中的一个公司，就算进行选择了。主要是基于vux这个UI组件库的特性造成了这个问题；基础代码如下：
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题解决
最新发布
weixin_43109722的博客
05-13 352
当子组件弹出时，动态设置scroll-view的属性：-webkit-overflow-scrolling为auto即可。注：这个问题只出现在ios端，安卓和h5没有问题。
iOS端z-index属性配置不生效
ice_cream__的博客
08-16 979
同样的z-index，iOS上不生效，没有按照指定的层级展示。
ios系统设置z-index不生效问题
weixin_46548238的博客
09-06 2302
两个盒子一个是侧边栏，一个是底部按钮，二者都是fixed固定定位。需求是侧边栏的层级要高于底部按钮，侧边栏z-index: 999，底部按钮z-index: 2。此时ipad上底部按钮的层级仍会高于侧边栏。适配ipad端时发现z-index属性在电脑调试生效，而在ipad实机上不生效。解决方法：在侧边栏加上css代码如下。
ios端 z-index不生效问题
weixin_47541876的博客
05-07 3883
安卓使用z-index层级没有问题，但在ios端不生效，比如多个模态框使用z-index时，高层级的z-index始终不能覆盖上来 解决办法： 在该元素上添加如下css样式 transform:translateZ(1px); 给某元素设置层级时可同时设置z-index和translateZ， Android和ios互不影响。 ...
ios zindex失效
09-08
但是在某些情况下，可能会出现z-index失效的情况。 首先，要确保元素的定位属性设置为relative、absolute或fixed。只有这些属性才会使z-index生效。 其次，如果多个元素具有相同的z-index值，那么它们在层叠顺序中...
深入探究iOS下fixed定位导致的问题
weixin_34198881的博客
08-04 2386
讨论背景 众所周知，fixed元素在IOS下的表现是糟糕的，fixed元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚（如：页面滚动，fixed元素与页面相互分离；页面滚动，fixed元素消失等）。这些表现过于离奇，显得没有逻辑，一时间很难找到对应的解决方案。所以笔者决定从一个简单列表页出发，把遇到的各种奇怪问题都罗列出...
iOS---z-index失效导致的原因
細水、長流√的专栏
10-17 8661
iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效 转载于：https://my.oschina.net/yjjjjjj/blog/993805
z-index ios失效
qq_42617840的博客
03-30 2799
safrai浏览器是把z-index直接忽略了。 层级设置： Android 端：z-index .XX{ z-index: 2; } ios 端：translateZ .xx{ transform: translateZ(1000px);/*可设负值*/ } 给某元素设置层级时可同时设置z-index和translateZ，Android和ios互不影响。 ...
z-index属性什么情况下会失效
weixin_44161385的博客
02-02 1264
z-index失效场景
IOS safari浏览器中出现的z-index不生效的层级问题
weixin_45072479的博客
11-29 1686
2.设置-webkit-overflow-scrolling touch改为-webkit-overflow-scrolling unset。参考链接：https://huaweicloud.youkuaiyun.com/64ec52a02ea0282871eab03c.html。开发中遇到了，弹窗组件和tab组件同时存在，在安卓上弹窗在tab上层，但在ios上，tab盖在了弹窗组件上层。3.也有说设置z-index时候设置transform，但对我无效。1.把弹窗组件挂载到body上。
iOS z-index属性失效
南宫辞迁
08-11 603
iOS的弹性滑动属性 -webkit-overflow-scrolling: touch 会导致 z-index 属性失效 加 transform:translateZ(1px);
ios上z-index样式不生效
xiaobaige6084的博客
03-10 2072
用h5在移动端做遮罩式的引导页，但是给元素添加z-index样式时，ios上不生效，不管怎么调整index的值都不行，添加"-webkit-appearance:none"也不行，安卓却正常，查了些资料，找到了原因： 只要被添加z-index样式的元素的父元素中有一个父元素带有overflow的样式，z-index就不生效，去掉即可，这好像是css在ios上的bug。 ...
z-index在ios失效问题记录
weixin_39944458的博客
05-17 3442
一直以为只要z-index的值够大，元素肯定在最上层。实际不然，想要实现的效果如下左图，but~效果是下右图： 查了z-inex失效的原因，原来是两个元素不在同一楼层 分析： 元素1是元素2前一个元素的子元素，因为1的父元素在负一楼，所以无论1的z-index多大，都在负一楼，体现为z-index失效了 方案： 将1、2修改为平级元素，再设置1的position为absolute(非...
z-index 在 iphone ios 无效的bug
高先生的猫
02-25 959
场景重现:在微信开发者工具可以正常显示,在安卓真机手机可以正常显示,在ios手机真机无法正常显示，虽然内容有，但是看不见 原因:子元素position:fixed;父元素position:fixed;，只需要将父级的fixed去掉或者子级的fixed去掉即可 ...
z-index在ios失效问题解决方案
Lei_zhen96的博客
07-22 3951
z-index并不是 通过数值大小来判断是否在上一层；只有在两者在同级的情况下，z-index大的数值就会在另一块的上级。在微信浏览器的ios系统中出现了这个bug，android没有发生，所以将两者改为同级，需要在上一层层级的元素的定位为absolute，该Bug解决。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值