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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/615015.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【软件测试作业_TPshop商城】农业工程学院-测试需求分析与测试计划+自动化+性能+测试用例+报告软件缺陷+测试计划+单元测试+系统测试

1测试需求分析与测试计划 1.1 被测系统简介 1.2测试需求分析 1.2.1单元测试层面的测试需求分析 1.2.2系统测试层面的测试需求分析 1.3测试计划 1.31测试范围与任务 1.3.2 测试环境 1.3.3测试进度安排 测试用例的设计2 2.1单元测试层面的测试用例设计 2.2系统测试层面的测试用例…

安装黑群晖 过程中 报错误13 卡8% 40% 52% 55%、56%、57%、58%解决方法

安装群晖时部分机器会报各种错误卡进度条&#xff0c;例如&#xff1a;DSM6报 错误13 、DSM7 报52% 55%、56%、57%、58% 如果你是压根搜索不到ip参考这个&#xff1a;群晖引导成功之后群晖助手/Synology Assistant搜索不到机器ip解决方法 - Tank电玩&米多贝克U盘的PID和VI…

【Golang map并发报错】panic: assignment to entry in nil map

go并发写map[string]interface{}数据的时候&#xff0c;报错&#xff1a;panic: assignment to entry in nil map 多个key同时操作一个map时&#xff0c;如&#xff1a; test[key1] 1 test[key2] "a" test[key3] true 就会遇到并发nil值报错&#xff0c;什么…

linux部署apache服务部署静态网站

第一步&#xff1a;配置IP地址 第二步&#xff1a;创建挂载点 配置yum仓库 mkdir -p /media/cdrom 挂载 mount /dev/cdrom /media/cdrom 安装服务 安装yum源 启用httpd服务程序并将其加入到开机启动项中 建立网站数据保存目录&#xff0c;并创建首页文件 mkdir /home/wwwroo…

Educational Codeforces Round 153 (Rated for Div. 2)(VP-11,寒假加训)

VP时间 A.模拟 如果有&#xff08;&#xff09;就是no 如果没有就2种情况 1.&#xff08;&#xff09;&#xff08;&#xff09;&#xff08;&#xff09; 2.&#xff08;&#xff08;&#xff08;&#xff09;&#xff09;&#xff09; 1.ac B.贪心 用面值大的花色硬币…

英伟达推新AI语音识别模型Parakeet 号称优于Whisper

领先的开源对话 AI 工具包 NVIDIA NeMo宣布推出 Parakeet ASR 模型系列&#xff0c;这是一系列最先进的自动语音识别&#xff08;ASR&#xff09;模型&#xff0c;能够以出色的准确性转录英语口语。Parakeet ASR 模型与 Suno.ai 合作开发&#xff0c;是语音识别领域的一大突破&…

Jenkins相关问题及答案(2024)

1、什么是Jenkins&#xff1f; Jenkins 是一个开源的自动化服务器&#xff0c;它可以被用作持续集成和持续交付&#xff08;CI/CD&#xff09;的工具。CI/CD 是一种软件开发实践&#xff0c;目的是帮助团队更快地实现软件构建、测试和发布。Jenkins 提供了自动化的框架&#x…

WCF REST消息格式(JSON/XML)选择

可以说WebHttpBinding和WebHttpBehavior是整个Web HTTP编程模型最为核心的两个类型&#xff0c;前者主要解决消息编码问题&#xff0c;而余下的工作基本上落在了终结点行为WebHttpBehavior上。WebHttpBehavior属性HelpEnabled和AutomaticFormatSelectionEnabled是“帮助页面”与…

这些代码对比工具,你都知道吗?屎山别怕

在程序开发的过程中&#xff0c;程序员会经常对源代码以及库文件进行代码对比&#xff0c;在这篇文章里我们向大家介绍六款程序员常用的代码比较工具 WinMerge WinMerge是一款运行于Windows系统下的文件比较和合并工具&#xff0c;使用它可以非常方便地比较多个文档内容&#…

Hadoop分布式文件系统(三)

目录 一、Hadoop 1、MapReduce 1.1、理解MapReduce思想 1.2、分布式计算概念 1.3、MapReduce介绍 1.4、MapReduce特点 1.5、MapReduce局限性 1.6、MapReduce实例进程 1.7、MapReduce阶段组成 1.8、MapReduce数据类型 1.9、MapReduce官方示例 2、YARN 一、Hadoop 1…

上海亚商投顾:创业板指放量涨近2% 全市场超4400只个股上涨

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日震荡反弹&#xff0c;创业板指午后涨超2%。华为概念股爆发&#xff0c;鸿蒙方向领涨&#xff0c;创识…

原创 | 一文读懂ChatGPT中的强化学习

原文&#xff1a;原创 | 一文读懂ChatGPT中的强化学习 ChatGPT基于OpenAI的GPT-3.5创造&#xff0c;是InstructGPT的衍生产品&#xff0c;它引入了一种新的方法&#xff0c;将人类反馈纳入训练过程中&#xff0c;使模型的输出与用户的意图更好地结合。在OpenAI的2022年论文《通…

多汗症如何诊断?

多汗症的诊断需要综合考虑多个因素&#xff0c;包括患者的症状、病史、体格检查以及相关实验室检查等。 首先&#xff0c;医生会详细询问患者的症状&#xff0c;了解出汗的部位、时间、严重程度等&#xff0c;以便做出初步的诊断。同时&#xff0c;医生还会询问患者的家族史和…

【Docker】Docker安装入门教程及基本使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Docker实战》。&#x1f3af;&#x1f3af; &…

【K8S 云原生】Kurbernets集群的调度策略

目录 一、Kubernetes的list-watch机制 1、List-watch 2、创建pod的过程&#xff1a; 二、scheduler调度的过程和策略&#xff1a; 1、简介 2、预算策略&#xff1a;predicate 3、优先策略&#xff1a; 3.1、leastrequestedpriority&#xff1a; 3.2、balanceresourceal…

Mysql——索引相关的数据结构

索引 引入 我们知道&#xff0c;数据库查询是数据库的最主要功能之一。我们都希望查询数据的速度能尽可能的快&#xff0c;因此数据库系统的设计者会从查询算法的角度进行优化。最基本的查询算法当然是顺序查找&#xff08;linear search&#xff09;&#xff0c;这种复杂度为…

【C++】sizeof()、strlen()、length()、size()详解和区别

sizeof()、strlen()、length()、size()均用于获取字符串长度 length(): C中&#xff0c;length()只用于获取字符串的长度。例如&#xff1a; String str"abcdefg"; str.length()7 size(): 除了与length一样可以获取字符串的长度&#xff0c;还可以获取vetor类型的长…

springboot基于java的小区物业管理系统(保安巡逻绿化消防)设计+jsp

小区物业管理系统采用的是JAVA语言开发&#xff0c;利用MySQL为数据库&#xff0c; 使用IDEA平台来编写代码&#xff0c;框架方面选择的是springbootweb框架&#xff0c;采用B/S结构实现系统。本系统的设计与开发过程中严格遵守软件工程的规范&#xff0c;运用软件设计模式&…

leecode1143 | 最长公共子序列

给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情况下删除某些字符&#xff08;也可以不…

JAVA常见面试题——后端--集合篇

2.1. 在平常工作中常用的集合有哪些 ArrayList&#xff1a; 基于动态数组实现&#xff0c;支持动态增长&#xff0c;适用于查找和遍历操作频繁的场景。 LinkedList&#xff1a; 基于链表实现&#xff0c;支持高效的插入和删除操作&#xff0c;适用于频繁插入和删除元素的场景。…