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

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

news 2026/2/9 11:34:30

最近在维护一个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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/8 4:23:14

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/12/14 20:57:41

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2026/2/8 20:41:58

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2026/2/9 6:48:28

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2026/2/7 15:39:49

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2026/2/1 7:05:07