iOS端z-index属性配置不生效

最新推荐文章于 2024-01-11 18:01:45 发布
最新推荐文章于 2024-01-11 18:01:45 发布
阅读量620 收藏 1
点赞数
分类专栏： 前端 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ice_cream__/article/details/132318473
版权

问题描述

同样的z-index，iOS上不生效，没有按照指定的层级展示。

解决方案

在写z-index属性时加一个transform：

  z-index: 998;
  transform: translateZ(1px);

为了兼容性也可以加上：

-webkit-transform: translateZ(1px);
-moz-transform: translateZ(1px);
-o-transform: translateZ(1px);
先树立一个小目标
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序中，iOS端z-index不生效的问题解决方法
m0_58109494的博客
06-13 1020
ios端小程序中，CSS设置了position，z-index依然会出现不生效的情况。在CSS中添加以下代码。
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
一次解决ios中z-index属性失效问题的经历
id_ip的博客
06-03 3838
在一次用h5实现app页面功能中，ios系统发生如下bug 问题 整个页面都被遮罩盖住，但是我检查了代码，发现遮罩的z-index=2,而全部科目区域的z-index=3，按道理讲，全部科目的区域应该是在遮罩的上方，但是在ios中显示错误，在安卓手机上显示正常。 然后查了一些资料，其中看到如下博客，才解决了问题 https://blog.csdn.net/zilvzsy/article/details/86022612 最主要的原因是全局样式-webkit-overflow-scrolling属性设置
关于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 属性不起作用。 更令人无语的
z-index ios失效
qq_42617840的博客
03-30 2703
safrai浏览器是把z-index直接忽略了。 层级设置： Android 端：z-index .XX{ z-index: 2; } ios 端：translateZ .xx{ transform: translateZ(1000px);/*可设负值*/ } 给某元素设置层级时可同时设置z-index和translateZ，Android和ios互不影响。 ...
ios系统设置z-index不生效问题
weixin_46548238的博客
09-06 2081
两个盒子一个是侧边栏，一个是底部按钮，二者都是fixed固定定位。需求是侧边栏的层级要高于底部按钮，侧边栏z-index: 999，底部按钮z-index: 2。此时ipad上底部按钮的层级仍会高于侧边栏。适配ipad端时发现z-index属性在电脑调试生效，而在ipad实机上不生效。解决方法：在侧边栏加上css代码如下。
ios上z-index样式不生效
xiaobaige6084的博客
03-10 1965
用h5在移动端做遮罩式的引导页，但是给元素添加z-index样式时，ios上不生效，不管怎么调整index的值都不行，添加"-webkit-appearance:none"也不行，安卓却正常，查了些资料，找到了原因： 只要被添加z-index样式的元素的父元素中有一个父元素带有overflow的样式，z-index就不生效，去掉即可，这好像是css在ios上的bug。 ...
ios端 z-index不生效问题
weixin_47541876的博客
05-07 3506
安卓使用z-index层级没有问题，但在ios端不生效，比如多个模态框使用z-index时，高层级的z-index始终不能覆盖上来 解决办法： 在该元素上添加如下css样式 transform:translateZ(1px); 给某元素设置层级时可同时设置z-index和translateZ， Android和ios互不影响。 ...
iOS-UI-故事版属性传值-8-7PerformSegue
05-25
iOS_UI_故事版属性传值_8_7PerformSegue
iOS开发笔记--详解UILabel的相关属性设置
09-01
主要介绍了iOS开发笔记--详解UILabel的相关属性设置,对初学者具有一定的参考价值，有需要的可以了解一下。
校园助手 iOS 端 HutHelper-Open.zip
09-17
校园助手 iOS 端 HutHelper-Open ,校园助手iOS端项目框架.  ├── HutHelper  │ ├── 3rd：因为...
IOS safari浏览器中出现的z-index不生效的层级问题
weixin_45072479的博客
11-29 1115
2.设置-webkit-overflow-scrolling touch改为-webkit-overflow-scrolling unset。参考链接：https://huaweicloud.csdn.net/64ec52a02ea0282871eab03c.html。开发中遇到了，弹窗组件和tab组件同时存在，在安卓上弹窗在tab上层，但在ios上，tab盖在了弹窗组件上层。3.也有说设置z-index时候设置transform，但对我无效。1.把弹窗组件挂载到body上。
IOS下z-index失效问题
ruanhongbiao的专栏
07-12 3894
一.zindex和transform translateZ冲突问题 1.在android上，如果对元素同时设置zindex和transform translateZ的值时，在显示上zindex的优先级要高于translateZ 2.在ios上，则相反，translateZ的优先级要高于zindex 3.所以最好在设置一系列元素时，zindex的值和translateZ的值应该一起逐级增长或逐...
z-index 和 fixed 在苹果手机ios不生效
MichaelAn的博客
09-11 2793
z-index 和 fixed 在苹果手机ios不生效 问题描述 今天开发遇到一个问题： 当一个元素固定定位时（fixed），同层级节点如果不想被固定定位的元素覆盖，那么需要设置 z-index，这样就不会被覆盖了。 举个例子：A是固定定位的元素，B不能被A覆盖，所以需要设置 B z-index（同时需要设置 position: relative，因为Z-index 必须在定位的元素上才能生效）。 .a { position: fixed; top: 100px; left: 100px; }
在ios上z-index不起作用问题的总结
最新发布
时清云的博客
01-11 942
最近在维护一个H5老项目时，遇到一个问题，就是在ios上z-index不起作用，在安卓上样式都是好的。项目的架构组成是vue2.x + vux + vuex + vue-router等用的UI组件库是vux在页面中有一个功能点，就是点选择公司列表的时候，会出现这个页面上面浮现一个a弹框页面，这个a弹框页面里面有搜索框，可以输入公司名进行搜索，然后出现公司列表，点击其中的一个公司，就算进行选择了。主要是基于vux这个UI组件库的特性造成了这个问题；基础代码如下：
iOS---z-index失效导致的原因
細水、長流√的专栏
10-17 8572
iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效 转载于：https://my.oschina.net/yjjjjjj/blog/993805
IOS上z-index和fixed定位无效
weixin_34306446的博客
11-01 232
IOS上z-index和fixed定位无效 在该元素上加： -webkit-transform:translateZ(1px); -moz-transform:translateZ(1px); -o-transform:translateZ(1px); transform:translateZ(1px); 参考文档： https://stackoverflow.com/q...
z-index属性什么情况下会失效
weixin_44161385的博客
02-02 1135
z-index失效场景
ios上z-index失效的原因
weixin_43795169的博客
05-14 647
做webapp的时候，需要做一个弹窗的遮罩层，但是给元素添加z-index的时候，android正常 ios上不生效 ，导致ios上有些内容没有被弹窗的遮罩层覆盖 原因：被添加z-inex样式的元素的父元素样式中含有overflow：……，导致了ios中z-index不生效 ...
ios z-index
09-08
在 iOS 开发中，z-index（层叠顺序）用于控制视图元素的显示顺序。iOS 使用 CALayer 来管理视图层级，每个 CALayer 对象都有一个 zPosition 属性来确定其在层次结构中的位置。 默认情况下，iOS 视图的层叠顺序是根据它们在视图层次结构中的顺序确定的。在视图层次结构中，后添加的视图将位于前面添加的视图上方。可以通过调整视图的层叠顺序来改变它们之间的显示顺序。 要更改视图的层叠顺序，可以使用以下方法之一： 1. 使用 bringSubviewToFront(_: UIView) 方法将一个视图移动到最前面： ```swift view.bringSubviewToFront(subview) ``` 2. 使用 sendSubviewToBack(_: UIView) 方法将一个视图移动到最后面： ```swift view.sendSubviewToBack(subview) ``` 3. 使用 insertSubview(_: UIView, belowSubview: UIView) 方法将一个视图插入到指定视图的下方： ```swift view.insertSubview(subview, belowSubview: siblingSubview) ``` 4. 使用 insertSubview(_: UIView, aboveSubview: UIView) 方法将一个视图插入到指定视图的上方： ```swift view.insertSubview(subview, aboveSubview: siblingSubview) ``` 通过这些方法，您可以根据需要调整视图的层叠顺序，控制它们在屏幕上的显示顺序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值