当前位置： 首页 > news >正文

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

news 2026/2/8 10:55:54

最近在维护一个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 就生效了。

相关文章：

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

最近在维护一个H5老项目时&#xff0c;遇到一个问题&#xff0c;就是在ios上z-index不起作用&#xff0c;在安卓上样式都是好的。 项目的架构组成是vue2.x vux vuex vue-router等 用的UI组件库是vux 在页面中有一个功能点&#xff0c;就是点选择公司列表的时候&#xff0c;会…...

编程日记 2024/1/12 11:57:52

力扣labuladong一刷day59天动态规划

力扣labuladong一刷day59天动态规划 文章目录 力扣labuladong一刷day59天动态规划一、509. 斐波那契数二、322. 零钱兑换 一、509. 斐波那契数 题目链接&#xff1a;https://leetcode.cn/problems/fibonacci-number/description/ 思路&#xff1a;这是非常典型的一道题&#x…...

编程日记 2024/1/12 11:54:49

pyenv环境找不到sqlite:No module named _sqlite3

前言 一般遇到这个问题都在python版本管理或者虚拟环境切换中遇到&#xff0c;主要有两个办法解决&#xff0c;如下&#xff1a; 解决方法1 如果使用的pyenv管理python环境时遇到没有_sqlite3 库&#xff0c;可以将当前pyenv的python环境卸载 pyenv uninstall xxx然后在系统…...

编程日记 2024/1/12 11:50:46

Histone H3K4me2 Antibody, SNAP-Certified™ for CUTRUN

EpiCypher是一家为表观遗传学和染色质生物学研究提供高质量试剂和工具的专业制造商。EpiCypher推出的CUT&RUN级别的Histone H3K4me2 Antibody符合EpiCypher的批次特异性SNAP-CertifiedTM标准&#xff0c;在CUT&RUN中具有特异性和高效的靶点富集。通过SNAP-CUTANA™K-Me…...

编程日记 2024/1/12 11:48:44

我用 Laf 开发了一个非常好用的密码管理工具

【KeePass 密码管理】是一款简单、安全简洁的账号密码管理工具&#xff0c;服务端使用 Laf 云开发&#xff0c;支持指纹验证、FaceID&#xff0c;N 重安全保障&#xff0c;可以随时随地记录我的账号和密码。 写这个小程序之前&#xff0c;在国内市场找了很多密码存储类的 App …...

编程日记 2024/1/12 11:45:42

windows项目部署

文章目录 一、项目部署1.1 先准备好文件1.2安装jdk1.3 配置环境1.4 安装tomcat1.5 MySQL安装本机测试的话:远程连接测试 1.6 项目部署 一、项目部署 1.1 先准备好文件 1.2安装jdk 下一步 下一步 下一步 1.3 配置环境 变量名&#xff1a;JAVA_HOME 变量值&#xff1a;jdk的…...

编程日记 2024/1/12 11:44:41

http首部

1. htttp 报文首部 报文结构为&#xff1a;首部 空行&#xff08;CRLF&#xff09;主体 在请求中 http报文首部由请求方法&#xff0c;URI&#xff0c;http版本&#xff0c;首部字段等构成 在响应中&#xff1a;状态码&#xff0c;http版本&#xff0c;首部字段3部分构成 2…...

编程日记 2024/1/12 11:42:39

2024.1.8 Day04_SparkCore_homeWork

目录 1. 简述Spark持久化中缓存和checkpoint检查点的区别 2 . 如何使用缓存和检查点? 3 . 代码题 浏览器Nginx案例 先进行数据清洗,做后续需求用 1、需求一&#xff1a;点击最多的前10个网站域名 2、需求二&#xff1a;用户最喜欢点击的页面排序TOP10 3、需求三&#x…...

编程日记 2024/1/12 11:39:37

09.简单工厂模式与工厂方法模式

道生一&#xff0c;一生二&#xff0c;二生三&#xff0c;三生万物。——《道德经》 最近小米新车亮相的消息可以说引起了不小的轰动&#xff0c;我们在感慨SU7充满土豪气息的保时捷设计的同时&#xff0c;也深深的被本土品牌的野心和干劲所鼓舞。 今天我们就接着这个背景&…...

编程日记 2024/1/12 11:38:35

DHCP，怎么在Linux和Windows中获得ip

一、DHCP 1.1 什么是dhcp DHCP动态主机配置协议&#xff0c;通常被应用在大型的局域网络环境中&#xff0c;主要作用是集中地管理、分配IP地址&#xff0c;使网络环境中的主机动态的获得IP地址、DNS服务器地址等信息&#xff0c;并能够提升地址的使用率。 DHCP作为用应用层协…...

编程日记 2024/1/12 11:34:32

读写锁（arm）

参考文章读写锁 - ARM汇编同步机制实例&#xff08;四&#xff09;_汇编 prefetchw-CSDN博客 读写锁允许多个执行流并发访问临界区。但是写访问是独占的。适用于读多写少的场景 另外好像有些还区分了读优先和写优先 读写锁定义 typedef struct {arch_rwlock_t raw_lock; #if…...

编程日记 2024/1/12 11:27:24

【第33例】IPD体系进阶：市场细分

目录 内容简介 市场细分原因 市场细分主要活动 市场细分流程 作者简介 内容简介 这节内容主要来谈谈 IPD 市场管理篇的市场细分步骤。 其中，市场管理（Market Management）是一套系统的方法。 用于对广泛的机会进行选择性收缩，...

编程日记 2024/1/12 11:24:22

response 拦截器返回的二进制文档（同步下载excel）如何配置

response 拦截器返回的二进制文档&#xff08;同步下载excel&#xff09;如何配置 一、返回效果图二、response如何配置 一、返回效果图 二、response如何配置 service.interceptors.response.use(response > {// 导出excel接口if (response.config.isExport) {return resp…...

编程日记 2024/1/12 11:17:15

为什么要使用云原生数据库？云原生数据库具体有哪些功能？

相比于托管型关系型数据库&#xff0c;云原生数据库极大地提高了MySQL数据库的上限能力&#xff0c;是云数据库划代的产品&#xff1b;云原生数据库最早的产品是AWS的 Aurora。AWS Aurora提出来的 The log is the database的理念&#xff0c;实现存储计算分离&#xff0c;把大量…...

编程日记 2024/1/12 11:13:12

05- OpenCV：图像操作和图像混合

目录 一、图像操作 1、读写图像 2、读写像素 3、修改像素值 4、Vec3b与Vec3F 5、相关的代码演示 二、图像混合 1、理论-线性混合操作 2、相关API(addWeighted) 3、代码演示&#xff08;完整的例子&#xff09; 一、图像操作 1、读写图像 &#xff08;1&#xff09;…...

编程日记 2024/1/12 11:12:11

人脸识别（Java实现的）

虹软人脸识别&#xff1a; 虹软人脸识别的地址&#xff1a;虹软视觉开放平台—以免费人脸识别技术为核心的人脸识别算法开放平台 依赖包&#xff1a; 依赖包是从虹软开发平台下载的 在项目中引入这个依赖包 pom.xml <!-- 人脸识别 --><dependency><gr…...

编程日记 2024/1/12 11:08:08

Maven 依赖管理项目构建工具 教程

Maven依赖管理项目构建工具 此文档为 尚硅谷 B站maven视频学习文档&#xff0c;由官方文档搬运而来&#xff0c;仅用来当作学习笔记用途&#xff0c;侵删。 另&#xff1a;原maven教程短而精&#xff0c;值得推荐&#xff0c;下附教程链接。 atguigu 23年Maven教程 目录 文章目…...

编程日记 2024/1/12 11:06:05

供应链+低代码,实现数字化【共赢链】转型新策略

在深入探讨之前&#xff0c;让我们首先明确供应链的基本定义。供应链可以被理解为一个由采购、生产、物流配送等环节组成的网状系统&#xff0c;它始于原材料的采购&#xff0c;经过生产加工&#xff0c;最终通过分销和零售环节到达消费者手中。 而数字化供应链&#xff0c;则是…...

编程日记 2024/1/12 11:03:02

[力扣 Hot100]Day3 最长连续序列

题目描述 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 出处 思路 此题可用带排序的哈希表&#xff0c;先构建哈希表&#xff0…...

编程日记 2024/1/12 11:02:01

【办公技巧】Word功能区灰色显示不能编辑,怎么破?

Word文档可以设置加密来保护文件禁止修改&#xff0c;但是在word文档中设置限制编辑功能时对它的作用是否有详细的了解呢&#xff1f;今天为大家介绍word限制编辑功能的作用以及忘记了限制编辑密码该如何解决。 设置限制大家应该都清楚&#xff0c;就是点击工具栏中的审阅 – …...

编程日记 2024/1/12 10:59:59

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/11/29 6:54:19

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/2/8 3:54:15

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2026/1/30 2:45:51

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2026/2/1 4:14:14

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2026/1/26 9:30:45

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2026/1/20 5:33:17

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/10/31 20:37:10

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2026/1/31 9:29:45

MySQL：分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

编程新知 2026/2/2 18:52:32