iOS z-index属性失效

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

 

iOS的弹性滑动属性
 

-webkit-overflow-scrolling: touch
 

会导致 z-index 属性失效
 

 

加
  
 

transform:translateZ(1px);
 


                

        

    

  



    


                



	

		

			

				
					
uniapp ios scroll-view中z-index失效的问题

				
			

			

				

					weixin_53236070的博客
				

				

					10-28
					
					694
					
				

			

		

		

			
				
uniapp ios scroll-view中z-index失效的问题

			
		

	



                

            
              



	

		

			

				
					
css的z-index、position、overflow属性混合时Safari的兼容问题，fixed定位+z-index同时使用不生效问题

				
			

			

				

					止喜的博客
				

				

					07-24
					
					1759
					
				

			

		

		

			
				
～～～转前端啦～～～
问题：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
					
					2111
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

				
					
IOS下z-index失效问题

				
			

			

				

					ruanhongbiao的专栏
				

				

					07-12
					
					4068
					
				

			

		

		

			
				
一.zindex和transform translateZ冲突问题

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

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

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

			
		

	





	

		

			

				
					
iOS---z-index失效导致的原因

				
			

			

				

					細水、長流√的专栏
				

				

					10-17
					
					8646
					
				

			

		

		

			
				
iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效

转载于：https://my.oschina.net/yjjjjjj/blog/993805

			
		

	





	

		

			

				
					
z-index属性什么情况下会失效

				
			

			

				

					weixin_44161385的博客
				

				

					02-02
					
					1247
					
				

			

		

		

			
				
z-index失效场景

			
		

	





	

		

			

				
					
ios zindex失效

				
			

			

				

					09-08
				

			

		

		

			
				
但是在某些情况下，可能会出现z-index失效的情况。  首先，要确保元素的定位属性设置为relative、absolute或fixed。只有这些属性才会使z-index生效。  其次，如果多个元素具有相同的z-index值，那么它们在层叠顺序中...

			
		

	





	

		

			

				
					
ios端 z-index不生效问题

				
			

			

				

					weixin_47541876的博客
				

				

					05-07
					
					3858
					
				

			

		

		

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

给某元素设置层级时可同时设置z-index和translateZ， Android和ios互不影响。

...

			
		

	





	

		

			

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

				
			

			

				

					ice_cream__的博客
				

				

					08-16
					
					958
					
				

			

		

		

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

			
		

	





	

		

			

				
					
IOS 的z-index 失效的原因

				
			

			

				

					极客神殿
				

				

					05-17
					
					4558
					
				

			

		

		

			
				
罪魁祸首就是它=====>iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效
调了超久，还用了safari的真机调试才找出来，心累。。。

IOS下z-index失效问题
1.在android上，如果对元素同时设置zindex和transform translateZ的值时，在显示上zindex的优先级要高于translateZ
2.在ios上，则相反，translateZ的优先级要高于zindex
3.所以最好在设置一系列元素时，zin

			
		

	





	

		

			

				
					
z-index 在 iphone ios 无效的bug

				
			

			

				

					高先生的猫
				

				

					02-25
					
					939
					
				

			

		

		

			
				
场景重现:在微信开发者工具可以正常显示,在安卓真机手机可以正常显示,在ios手机真机无法正常显示，虽然内容有，但是看不见

原因:子元素position:fixed;父元素position:fixed;，只需要将父级的fixed去掉或者子级的fixed去掉即可


...

			
		

	





	

		

			

				
					
一次解决ios中z-index属性失效问题的经历

				
			

			

				

					id_ip的博客
				

				

					06-03
					
					4060
					
				

			

		

		

			
				
在一次用h5实现app页面功能中，ios系统发生如下bug



问题
整个页面都被遮罩盖住，但是我检查了代码，发现遮罩的z-index=2,而全部科目区域的z-index=3，按道理讲，全部科目的区域应该是在遮罩的上方，但是在ios中显示错误，在安卓手机上显示正常。
然后查了一些资料，其中看到如下博客，才解决了问题
https://blog.youkuaiyun.com/zilvzsy/article/details/86022612
最主要的原因是全局样式-webkit-overflow-scrolling属性设置

			
		

	





	

		

			

				
					
z-index在ios失效问题解决方案

				
			

			

				

					Lei_zhen96的博客
				

				

					07-22
					
					3912
					
				

			

		

		

			
				
z-index并不是 通过数值大小来判断是否在上一层；只有在两者在同级的情况下，z-index大的数值就会在另一块的上级。在微信浏览器的ios系统中出现了这个bug，android没有发生，所以将两者改为同级，需要在上一层层级的元素的定位为absolute，该Bug解决。
...

			
		

	





	

		

			

				
					
关于z-index 层级显示 ios端不生效问题

				
			

			

				

					Sxyyy1的博客
				

				

					03-30
					
					372
					
				

			

		

		

			
				
【代码】关于z-index 层级显示 ios端不生效问题。

			
		

	





	

		

			

				
					
ios 屏幕滑动时z-index失效问题(android不会出现)

				
			

			

				

					liucai1018的博客
				

				

					09-07
					
					1075
					
				

			

		

		

			
				
问题描述：

为一块区域设置z-index值，让它在上面；如A区域是2，B区域z-index:3，A和B区域有部分重叠

在android上运行时没有问题，但在ios上会出现一个问题：上下滑动的时候，发现A区域和B区域的重叠部分上面为A了



原因：

ios系统，当滑动屏幕时，z-index失效了，因此导致A-B区域重叠处B被遮挡了



解决办法：

添加如下：-webkit-transform属性允许我们对元素进行旋转、缩放、移动或倾斜，这里是进行移动，但距离都是0，即可解决问题

原因暂时不明..

			
		

	





	

		

			

				
					
uni-app_scroll-view_ios端_组件内部z-index失效处理

				
			

			

				

					m0_37602317的博客
				

				

					05-12
					
					2224
					
				

			

		

		

			
				
uni-app scroll-view ios端 组件内部z-index失效处理
主要原因
<scroll-view> 内部设置了  -webkit-overflow-scrolling: touch 样式，导致z-index失效（safari 3D变换会忽略z-index的层级问题）造成内部组件的弹出框显示遭到遮挡
<template>
  <uni-scroll-view v-on="$listeners">
    <div
      ref="wrap"


			
		

	





	

		

			

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

				
			

			

				

					yixiancheng的博客
				

				

					10-19
					
					2954
					
				

			

		

		

			
				
ps：俩问题产生的原因是引用了scroll.js文件
问题一：无法滑动
scroll.js文件禁用了滑动事件，在不需要scroll方法的时候，解除禁用即可。

      /***滑动限制***/
      stop(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow=...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值