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

时清云

已于 2024-01-18 15:14:22 修改

阅读量1k

点赞数 7

分类专栏：笔记 css vue3.x 文章标签： z-index在ios上不生效 z-index不生效

于 2024-01-11 18:01:45 首次发布

本文链接：https://blog.csdn.net/xiaolinlife/article/details/135534484

版权

笔记同时被 3 个专栏收录

110 篇文章 1 订阅

订阅专栏

vue3.x

16 篇文章 0 订阅

订阅专栏

css

13 篇文章 1 订阅

订阅专栏

本文讲述了在维护一个基于Vue2.x、VUX和Vuex的H5项目时，遇到在iOS上z-index不起作用的问题。通过分析，作者发现原因是VUX组件的层级问题，并尝试了transform和teleport方法，最终通过v-transfer-dom解决了问题，同时列举了z-index失效的常见原因和解决方案。

摘要由CSDN通过智能技术生成

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

<template>
	<div class="select-all">
		<div class="companyList">
			<popup></popup>
		</div>
	</div>
</template>

<script>
import { Popup } from 'vux';
export default {
	components: {
		Popup,
	},
};
</script>

打包之后，在页面上运行之后，会发现在页面中的页面布局如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面</title>
</head>
<body>
    <div class="select-all">
        <div class="companyList">
            <div>...</div>
            <!-- 显示的列表页 -->
           <div>
              <div class="vux-popup-content vux-popup-content-show">
                <div>公司列表</div>
              </div>
           </div>
        </div>
    </div>
    <!-- 蒙层 -->
    <div class="vux-popup-mask vux-popup-mask-show"></div>
</body>
</html>

会发现蒙层在body元素中，而显示的弹窗列表在另外的很深的html中，不在一个层级中。

这个z-index样式是vux组件库默认设置的

.vux-popup-mask{
  z-index:500;
}

于是我给vux-popup-content这个类名设置的是：

.vux-popup-content{
  z-index:501;
}

然后在安卓中是有效果的，在ios中无效。

首先在html中，vux-popup-mask和vux-popup-content不在一个层级中，不知道是不是因为这个原因。那我怎么解决的呢？
我参考了这这两种做法：

方法1：transform

div {
    z-index: 2;
    transform: translateZ(2px)
}

方法2：teleport

// vue
<teleport to="body">
    <div></div>
</teleport>
 
 
// 使用vant允许指定dom的组件
 
<van-popup teleport="body"></van-popup>

我借鉴了第二种方法：
加了v-transfer-dom属性
代码如下：

<template>
	<div class="select-all">
		<div class="companyList" v-transfer-dom>
			<popup></popup>
		</div>
	</div>
</template>

<script>
import { Popup, TransferDom } from 'vux';
export default {
    directives:{
       TransferDom
    },
	components: {
		Popup,
	},
};
</script>

通过v-transfer-dom可以把内容元素vux-popup-content移动到紧挨着body元素下面，这样就可以和vux-popup-mask处于一个层级里面；

我们可以看一下打包运行后的代码，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面</title>
</head>
<body>
    <div class="select-all">
        <div>...</div>
    </div>
    <!-- 弹窗内容区 -->
    <div class="v-transfer-dom companyList">
        <div>...</div>
        <!-- 显示的列表页 -->
       <div>
          <div class="vux-popup-content vux-popup-content-show">
            <div>公司列表</div>
          </div>
       </div>
    </div>
    <!-- 蒙层 -->
    <div class="vux-popup-mask vux-popup-mask-show"></div>
</body>
</html>

可以看到元素已经移到了外面，所以这个时候设置的z-index: 501 就生效了。

那么为什么会出现这种情况呢？我仔细分析了一下

z-index失效的几种情况：

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。

z-index元素的position属性需要是relative，absolute或是fixed。

z-index属性在下列情况下会失效：

1.父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
2.元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
3.元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；
4.在手机端 iOS 13 系统中，-webkit-overflow-scrolling:touch 也会使 z-index 失效，将 touch 换成 unset，在需要滑动的地方比如弹窗再加上这条样式。

时清云

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
在ios上z-index不起作用问题的总结

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

扫一扫