iOS手机定位层级问题

最新推荐文章于 2022-11-12 20:26:13 发布
最新推荐文章于 2022-11-12 20:26:13 发布
阅读量920 收藏
点赞数
分类专栏： 兼容 文章标签： css h5兼容 iOS 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37587135/article/details/102510651
版权
在iOS设备的App或Safari浏览器中，尽管设置了高z-index，定位元素并未如预期显示在顶部。文章介绍了该问题的现象，并提供了解决方案，即通过增加z-index来确保元素的正确层级显示。
摘要由CSDN通过智能技术生成

iOS手机定位层级问题

现象

在iOS手机app内或者Safari浏览器中定位的元素设置很高的层级eg:9999, 想实现的最上层的效果，例如代码：

<div style="position: relative">
	<div style="position: relative" class="top">
最低0.47元/天 解锁文章
疯狂的狗蛋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常见的移动端H5页面开发遇到的问题解决
weixin_41510467的博客
11-09 735
有时扫描二维码后会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如App的下载页面等,因此二维码的扫描测试不能少;举例:如果二维码扫描结果是应用的下载地址的,可以使用应用宝的微下载地址生成二维码,这就不会被"温馨提醒"了。2.生成BFC元素的子元素中每个子元素的外边距和包含块的左边界相接触(对于从右到左的格式化,右外边距和右边界相接触),除非这个子元素也创建一个新的BFC(如它自身也是一个浮动元素)
关于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弹层层级问题
weixin_30624825的博客
04-22 926
　　在处理h5移动端的时候，经常遇到兼容问题，特别是跨平台，w3c不明确的情况下。 　　我经常遇到iOS层级不够的情况：即，安卓一切显示正常，但在iOS环境下，就经常遇到fixed定位层级不够的问题（安卓层级在下一层，iOS层级在上一层） 在多次相遇后，我翻找了许多资料，包括z-index的使用，最后发现了，是css新属性的权重问题。 　　是flex布局的权重在iOS中定义的十分高，导致了它...
IOS safari浏览器中出现的z-index不生效的层级问题
热门推荐
就是不掉头发
08-05 40万+
出现的问题： 使用全屏遮罩层时遮不住导航栏，或者是弹窗时被导航栏覆盖，弹窗在导航栏下方 此情况仅IOS端出现，安卓和PC端正常，考虑IOS兼容性问题 1.为什么会出现层级不生效 原因1 谷歌，火狐等浏览器都是直接将一个盒子理解成一块一块的，想分层就按照你的z-index高低来区分，而safari不是，safari是将整个浏览器的页面看成一个整体，虽然也是一块一块的，但是他的分层是按照视觉感来分层的，它认为在下面的代码块总比在上面的代码块离人的眼睛近，所以就应该覆盖在上面的代码块上面，不应该用z-index来
关于iphone 6 10.3.3版本下设置绝对定位absolute后的定位偏差问题
weixin_43776965的博客
08-19 823
在用absolute写购物车的右上角数字样式的时候，发现在iphone 6 10.3.3版本下定位的位置和正常孩子(phone)不太一样，经过测试发现，在只设置absolute不设置位移的情况下，正常来说应该是保持原有位置的，但是在iphone 6 下，位置实际上是跑到了控件最上方，ps:就不给图了。 后来在咨询大佬后，有了解决方案，给父控件设置relative，然后给数字样式设置right:0,top:0.这样它们的起点就是一样的了，后面再慢慢调就好了。 为什么给父控件设置relative，然后给数字样式
iOS开发中，调整view层级位置的两个属性
xiaojinIT的博客
02-24 1万+
控件的层级关系和你加入到父视图的顺序有关，也就是先addsubview至父视图的，层级越低，会被后加入的遮盖。 可以通过以下函数改变子视图的层级：1.Objective-C版本： 将UIView显示在最前面： - (void)bringSubviewToFront:(UIView *)view;将UIView显示在下面： - (void)sendSubviewToBack:(UIView
Safari 定位fixed下，z-index层级失效问题
Jensonhui's Blog
09-20 4881
在Safari浏览器下，此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari浏览器，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的3D视角进行渲染。 解决方案： 方法1： 父级...
iOS中多个position:fixed中z-index失效导致的坑
zilvzsy的博客
01-07 1万+
记笔记，免忘记！ios苹果手机，多个position:fixed导致层级关系失效，弹窗无法显示。怎么调试都无法实现，部分苹果手机不会出现此问题。 首先，排除了浮动等会导致出现这个问题的情况。后网上百度了下，说是从父原则但是我按照这篇文章的说法修改样式js还是无效。因为是z-index属性失效导致了该问题，如下是正确解决了我此时的问题的方法 方法一： 页面上加上 iOS的弹性滑动属性-we...
iOS 元素定位方式总结
米不开朗基罗的博客
04-28 1756
文章目录一：Appium 元素定位工具安装iOS获得设备id的方法：二：iOS定位元素自动处理系统权限弹框 一：Appium 元素定位工具安装 第一种：通过Appium1.6的Inspector来查看 可以通过定位找到元素xpath或name 个人不推荐用这个方法，实际操作中发现，每次操作后点击刷新比较慢，而且有时左侧布局文件更新不及时，导致点击左侧屏幕的控件找不到元素，有时App Source根本就没更新 第二种：通过macaca的App inspector来定位元素 1.安装macaca-li $ n
微信小程序使用van-tabs组件，ios真机z-index层级错乱问题【已解决，ios自定义组件层级不穿透】
weixin_42289080的博客
09-22 2986
一、这是模拟器上的效果 二、这是苹果11真机上的效果（安卓真机正常） 三、先来理一下代码的层级现状 A 为van-tabs B 是自定义组件，为数据列表，C为单个数据 D 也是自定义组件（图中省略）为单个数据详情弹窗，且D是B的子组件！ 在z-index层级上 A是相对定位，B、C无定位，所以A>B D设置z-index 9999 但不生效 四、理清楚之后，有一个大胆的猜想： B、D均为自定义组件，且D是B的子组件，会不会导致D的层级最高只能和B一样高？导致不能穿透B，所以被A组件盖住
iOS 15.4中添加CSS单元‘dvh‘，解决100%的高度问题。
前端仙人的博客
06-28 928
在iOS 15.4中对Safari浏览器进行了各种更新。 增加的dvh单元对网络开发来说意义重大。 直到现在，iOS Safari中还存在一个问题，当开始滚动时，URL栏会变小，屏幕尺寸也会改变。 因此，有必要为 "大URL栏 "或 "小URL栏 "状态设置100%的高度，而仅用CSS就很难实现反映URL栏当前状态的100%的高度。 dvh解决了这个问题。 结论 可以写成height: 100dvh;，其中height: 100%;或height: 100vh;之前被写成height: 100dvh;。 以
微信小程序map组件层级过高，导致model模态框无法显示的解决方法
李瑞清的博客
03-04 3792
最近，在做一个土地划块的微信小程序，需要使用map组件。根据业务需求，需要在map上弹出一个模态框。由于map组件是原生组件，层级最高。导致模态框被覆盖在map组件下面。百度了很多，都说使用cover-view解决。但是我要是使用组件，就无法达到效果了。于是，我喝了一杯咖啡，思考着如何解决。突然，灵光一现，种种方案涌入脑海。最后我选择了下面这个方案。供大家参考。 我们可以使用view组件将map...
安卓和IOS的适配问题(5个)
最新发布
weixin_64355008的博客
11-12 1928
安卓和IOS的适配问题(5个)
深入探究iOS下fixed定位导致的问题
weixin_34198881的博客
08-04 2223
讨论背景 众所周知，fixed元素在IOS下的表现是糟糕的，fixed元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚（如：页面滚动，fixed元素与页面相互分离；页面滚动，fixed元素消失等）。这些表现过于离奇，显得没有逻辑，一时间很难找到对应的解决方案。所以笔者决定从一个简单列表页出发，把遇到的各种奇怪问题都罗列出...
vant框架使用Popup 弹出层时,固定定位和绝对定位在苹果真机层级会高于Popup弹窗问题
caikys的博客
07-22 3174
vant框架使用Popup 弹出层时,固定定位和绝对定位在苹果真机层级会高于Popup弹窗问题
iOS UIWindow的层级问题Level
sunjie886的博客
03-15 2753
每一个IOS程序都有一个UIWindow，在我们通过模板简历工程的时候，xcode会自动帮我们生成一个window，然后让它变成keyWindow并显示出来。这一切都来的那么自然，以至于我们大部分时候都忽略了自己也是可以创建UIWindow对象。 　　通常在我们需要自定义UIAlertView的时候（IOS 5.0以前AlertView的背景样式等都不能换）我们可以使用UIWindow来实现
iOS页面层级分析
xo19882011的专栏
05-06 550
如题，分析一下页面层级。 页面层级概念比较好理解，就是上边的层盖住下边的层，这样一层一层的堆叠起来。 在 uiview 内部通过 addsubviews 来增加一层页面。 但是涉及到 uiviewcontroller 操作的时候是啥样的呢。 实验基于swift 5.0 譬如现在有一个页面层级关系如下： windowA |- viewControllerA |- subviewA |- viewC pushViewController / popViewController 通过vi
H5页面的部分IOS兼容处理
qq_44242707的博客
09-29 988
问题：遮罩层遮挡位置不正确有白边，提交按钮应该在最底部却显示在popup上面。：uni-app开发H5项目，H5项目链接webview嵌入app中。解决：将popup组件放到外层组件中，避免放到内层组件中。IOS底部有安全距离，设置样式时要考虑安全距离。
iOS 视图层次管理 sendSubviewToBack、bringSubviewToFront
lqk的博客
02-22 1万+
直接上代码 [objc] view plain copy  print? - (void)viewDidLoad {       [super viewDidLoad];       // Do any additional setup after loading the view, typically from a nib.  
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值