ios (12.0.1) 中position: sticky属性，导致z-index属性失效

最新推荐文章于 2024-01-11 18:01:45 发布

原创最新推荐文章于 2024-01-11 18:01:45 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #html5 #css3

在iOS 12.0.1系统下，使用H5页面时，若在元素上设置position:sticky属性进行固定，可能会导致z-index失效。本文提供了解决此问题的方法，即将sticky值更改为fixed。

在部分ios系统中(12.0.1) ，h5页面，在元素上设置position: sticky属性进行固定元素，会导致其z-index失效。

解决方法：可以将sticky值改为fixed

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

id_ip

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

position sticky与overflow冲突失效无作用，解决办法

hyduan_h5的博客

08-04

5044

position 可能失效的情况：1、须确定设置sticky元素的参考滚动父级元素2、指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。...

spring-boot-learning::rocket:spring-boot学习历程中的实例

05-14

语言： JDK12.0.1 IDE： IDEA 2019.1.3 依赖管理： Maven 数据库： Mysql 5.6.35 示例代码 Spring Boot系列以下是本人学习Spring Boot的历程总结，前面一部分没有写博文很可惜只有从第10章才开始写：Spring Boot2...

参与评论您还未登录，请先登录后发表或查看评论

CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位

qq_51066068的博客

03-18

5717

目录 1.定位布局 1.1.静态定位（ Static positioning）简单代码实现： - 1.2.什么是相对定位?（ Relative positioning ）简单代码实现： - 1.3.什么是绝对定位?（Absolute positioning） - 绝对定位参考点效果图： -绝对定位水平居中 - 1.4.固定定位（Fixed positioning） - 1.5.粘滞定位（ Sticky positioning ） position: sticky; ...

容易忽视的CSS3粘性定位position sticky

weixin_45709829的博客

03-26

2873

CSS3粘性定位position sticky 一、介绍 css3中新的定位属性，本身也具有定位元素的属性理解为相对定位position:relative + 固定定位position:fixed的混合体 position:sticky粘性定位，基于用户的滚动定位二、基本原理依赖用户的滚动定位，行为像position:relative，当页面滚动超出目标区域，行为表现为position:fixed 什么是目标区域相对父元素，超出阈值，这个阈值通过top、left、right、bottom确定滚动元

深入理解css中position属性及z-index属性

weixin_33835103的博客

11-29

720

深入理解css中position属性及z-index属性　　在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。　　position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。第一部分：...

关于position: sticky在小程序中IOS真机下，偶然失效的问题总结

厦门在乎科技

08-31

3085

虽然小程序中有大把的自定义sticky组件可用，原理无非是监听页面滚动改变position来实现，实际体验上卡顿感难以避免，跟原生的position: sticky比还是有很大距离。最近写的页面已经开始逐渐用上原生position: sticky，在测试中发现IOS真机下，某些场景的sticky会失效，花了点时间研究，得出来以下结论： IOS必须加上position: -webkit-sticky; IOS下sticky的元素必须与占位元素在同一个作用域下面，才生效直接在页面中写sticky有效

qz@qz-TM1707:~$ docker run --rm --gpus all nvidia/cuda:12.0.1-base-ubuntu24.04 nvidia-smi Unable to find image 'nvidia/cuda:12.0.1-base-ubuntu24.04' locally docker: Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers). See 'docker run --help'. qz@qz-TM1707:~$ docker run --rm --gpus all nvidia/cuda:12.0.1-base-ubuntu22.04 nvidia-smi Unable to find image 'nvidia/cuda:12.0.1-base-ubuntu22.04' locally docker: Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers). See 'docker run --help'. qz@qz-TM1707:~$ 什么情况怎么解决

最新发布

09-18

当使用 Docker 拉取 `nvidia/cuda:12.0.1-base-ubuntu24.04` 和 `nvidia/cuda:12.0.1-base-ubuntu22.04` 镜像时出现 `Get https://registry-1.docker.io/v2/` 请求超时的问题，可通过修改 Docker 的配置文件 `daemon...

精选资源

winlibs_mingw:WinLibs GCC和MinGW-w64 Windows的独立版本-开源

05-26

Windows版本的免费开源GCC（GNU编译器集合）编译器，用于C和C ++（以及其他语言，例如Objective-C，Fortran和D）。这是一个独立的个人版本，这意味着此下载为Windows提供了完整的编译器环境。如果需要命令行工具...

cuda-12.0.1-windows-network.exe

03-11

cuda-12.0.1-windows-network.exe

精选资源

guava-12.0.1-API文档-中文版.zip

04-23

赠送原API文档：guava-12.0.1-javadoc.jar；赠送源代码：guava-12.0.1-sources.jar；赠送Maven依赖信息文件：guava-12.0.1.pom；包含翻译后的API文档：guava-12.0.1-javadoc-API文档-中文(简体)版.zip； Maven...

在ios上z-index不起作用问题的总结

时清云的博客

01-11

2381

最近在维护一个H5老项目时，遇到一个问题，就是在ios上z-index不起作用，在安卓上样式都是好的。项目的架构组成是vue2.x + vux + vuex + vue-router等用的UI组件库是vux在页面中有一个功能点，就是点选择公司列表的时候，会出现这个页面上面浮现一个a弹框页面，这个a弹框页面里面有搜索框，可以输入公司名进行搜索，然后出现公司列表，点击其中的一个公司，就算进行选择了。主要是基于vux这个UI组件库的特性造成了这个问题；基础代码如下：

沙盘笔记 z-index无效及解决方法

alize的博客

09-04

388

z-index无效的情况，一共有三种： 1、父标签 position属性为relative； 2、问题标签无position属性（不包括static）； 3、问题标签含有浮动(float)属性。解决办法有是三个： 1、position:relative改为position:absolute； 2、浮动元素添加position属性（如relative，absolute等）； 3、去除浮动。如果无...

关于position: sticky在小程序中IOS真机下偶然失效的问题总结

zaihukeji的博客

08-19

877

position:sticky不生效

qq_38886284的博客

11-10

5786

通常我们用来实现吸顶效果都会用到position:sticky,但是在以下这几种情况的时候sticky会失效。

IOS 的z-index 失效的原因

极客神殿

05-17

4739

罪魁祸首就是它=====>iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效调了超久，还用了safari的真机调试才找出来，心累。。。 IOS下z-index失效问题 1.在android上，如果对元素同时设置zindex和transform translateZ的值时，在显示上zindex的优先级要高于translateZ 2.在ios上，则相反，translateZ的优先级要高于zindex 3.所以最好在设置一系列元素时，zin

2020-12-03问题以及知识盲点

qq_43506529的博客

12-03

207

position新增属性 position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。注意点：设置position:sticky同时给一个(top,bottom,right,left)之一即可使用条件： 1、父元素不能overf

ios端 z-index不生效问题

weixin_47541876的博客

05-07

3939

安卓使用z-index层级没有问题，但在ios端不生效，比如多个模态框使用z-index时，高层级的z-index始终不能覆盖上来解决办法：在该元素上添加如下css样式 transform:translateZ(1px); 给某元素设置层级时可同时设置z-index和translateZ， Android和ios互不影响。 ...

position:sticky

chelflan's blog

12-28

985

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8244 本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。一、Chrome杀了个回马枪 position:sticky早有耳闻也有所了解，后来，Chrome放弃了对其支持，我也就不关心这个声明了，今天偶然发现，卧槽，C...

h5页面在ios上无法滑动与z-index无效的情况

yixiancheng的博客

10-19

3052

ps：俩问题产生的原因是引用了scroll.js文件问题一：无法滑动 scroll.js文件禁用了滑动事件，在不需要scroll方法的时候，解除禁用即可。 /***滑动限制***/ stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow=...