使用css3动画的元素层级z-index被放大

最新推荐文章于 2023-02-15 16:32:17 发布

卷毛12138

最新推荐文章于 2023-02-15 16:32:17 发布

阅读量1.7k

点赞数 2

分类专栏： css 文章标签： css3动画 z-index 层级安卓浏览器

本文链接：https://blog.csdn.net/qq_39174815/article/details/90289081

版权

css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

今天遇到了使用css3动画的元素层级被放大置顶的问题，ios浏览器上没问题，安卓原生浏览器和安卓微信上有问题。

使用了css3动画的元素z-index失效，兄弟元素设置多高的z-index都盖不住

解决办法就是父元素设置

transform-style:preserve-3d;

需要解决层级问题的所有元素都加上

transform:translateZ(0);

translateZ()的值随元素层级自行设置

关注公众号大前端时代获取更多前端知识

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

卷毛12138

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

有道无术，术尚可求

04-12

4736

项目构建 webpack + vue + vue-router + vueX + axios + antd of vue 起因构建项目的时候由于采用的 antd of vue ui库，里面没有类似点击唤醒遮罩层的组件，所以自己手写vue组件进行引入，主要用的是 css3 z-index 属性，通过z-index 值不同进行层级展示。（ ps ：之前处理过类似需求，由于用的是v...

[CSS入门到进阶] 用transform后z-index失效了？总结transform的注意事项！

Hull Qin

08-21

3204

前端开发者一定要知道的transform的知识！如果你不了解这些，就去使用transform这个css，很可能就踩坑了！快来学习一下吧！

1 条评论您还未登录，请先登录后发表或查看评论

探究transform动画元素的z-index

凹凸实验室

10-21

227

z-index 和 translate3d在一次需求中，需要做出三张卡牌走马灯式滚动的效果，由于在前面的一张卡牌需要挡住后面的卡牌，自然而然地就用 z-index 使前面的卡牌显示在最上面，配以 transform 动画让“走马灯”滚起来，在开发过程中，在 PC 侧 Chrome 中表现良好，在本人手机浏览器中也表现良好，最后测试时却发现，在微信客户端或 QQ 客户端中打开页面出现问题，“走马灯”...

css的z-index改变层级

q285661571的专栏

05-25

915

在CSS中，显然，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed

CSS3动画-定位元素层级覆盖问题

Zerofishcoding的博客

10-01

6076

在之前写过一篇博客js-使用js生成10*10个带标号的div，关于如何使用js生成10*10的100个div。最近尝试着在这使用定位+循环生成的100个div上加上span并配合css3里的transform,相当于每一个div都是一个四个面的立方体，每一个面都是一整张背景图的一部分。但是出现了定位元素层级覆盖问题

transition动画z-index层级失效问题

weixin_33847182的博客

02-22

1423

最近在做一个项目，针对css3动画遇到的问题颇多，想当然，一些由css3引发的手机适配也就来了，做了不少适配，个人觉着anroid手机应该是遇到适配问题最多的一大类手机了，不过在该动画项目上，不得不对android手机佩服的五体投地，完全ko小苹果；下面就对ios动画做一些问题总结： rotateY翻转动画，ios系统8以上弹窗被背景遮住问题；造成该问题原因就是ios手机动画执行渲染的时候zi...

CSS3动画，6种常见错误

大前端

07-25

1793

本篇文章总结在CSS3动画上遇到的问题，6种常见错误，以及解决方案。愿每一位前端开发者在后来都能躲过这些坑！常见错误：Animation篇首先先来复习一下animation的有哪些属性：属性名默认作用 animation-name none keyframe 的名字 animation-duration 0s 运行总时长 animation-timing-fun...

CSS3画廊【图片展示】点击放大图片.rar

07-10

综上所述，这个CSS3图片展示特效项目涵盖了现代网页设计中的多种技术，包括CSS3的`transform`、`position: fixed`、`z-index`、`transition`属性，以及JavaScript事件处理和HTML5的结构元素使用。通过学习和实践这样...

CSS3动画、定位小结

karry_yuan的博客

04-10

558

CSS3动画transition 定位小结 Z-index属性和网页元素透明度

CSS+jQuery实现的一个放大缩小动画效果

12-02

当一个元素被放大时，它的`z-index`被设置为更高，使其位于其他元素之上。接下来，我们引入jQuery库，这是一个广泛使用的JavaScript库，简化了DOM操作和动画效果的实现。在这个例子中，使用了jQuery的`$(function...

css3的transform造成z-index无效解决方案

09-25

主要介绍了css3的transform造成z-index无效解决方案,需要的朋友可以参考下

CSS——浮动、定位、动画

qq_52006379的博客

06-12

247

这也是一种实现行内元素排列的方式，但是我们很多情况都是用float向右浮动向左浮动清除周围两边浮动 overflow及边框塌陷问题 4.1 增加父级元素的高度（不建议）弊端：元素假设有了固定高度，就会被限制 4.2 增加一个空的div，然后清除浮动弊端：代码中尽量避免空div 4.3 overflow: hidden;假如父级没有指定高度，那么高度就由内容决定，该方法可以避免他塌陷弊端：有些不适合切除的地方不适合使用 4.4 父类添加一个伪类 :after（推荐,常考）对比 displ

【我不熟悉的css】safari浏览器层级z-index无效，使用transform代替

最新发布

qq_17335549的博客

02-15

487

【我不熟悉的css】safari浏览器层级z-index无效，使用transform代替

关于transform导致z-index失效的问题

盾盾的博客

09-26

2756

https://segmentfault.com/q/1010000002480824 这里涉及到一个stacking context（有人翻译为层叠上下文）的概念。给元素设置transform属性会创建一个新的stacking context。 ...

页面中的各个元素使用了transform动画时导致元素层级错乱的解决方案

huanlesyaya的博客

04-22

1758

在设置动画元素父级添加overflow：hidden；利用BFC的原理就可以解决此问题

CSS Z-index属性和 @keyframes创建动画

Haibing的博客

07-07

2434

Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部即使Z-index并不是一个难以理解的属性，但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属

css中的层级问题

konglingnan999的博客

01-27

1236

css中的层级问题在css中，涉及到定位、浮动、z-index的层级问题时很容易让人云里雾里。本来我以为想让谁的层级更高就直接给它设置z-index就好了。可是这次做京东项目时，我设置的却不起作用。情况类似于这样： <div class="d1"> <div class="d2"></div> </div> <div class="d3"></div>d1的

vue2使用transition过渡效果时，样式发生错误，过渡结束后，样式正确显示

赢是渺然一线，输才是常态的博客

04-02

1539

因为业务要求，我自己写了一个popup组件，在需要用户确认的地方调用显示，为了提升体验，所以想给popup增加淡入淡出的效果，于是用了animate.css和transition组件，但是在过渡过程中发生了样式错误，具体看下图：过渡完成后，正确显示：尝试一开始，我认为可能是z-index的问题，但是即使我把z-index调到100000，还是没有正确显示，而且过渡结束之后，是能正确显示的...

移动端设置页面内容animation css3动画,IOS 手机上下滑动导致页面层级错乱问题

qq_15006083的博客

01-13

690

解决方案如下：ios 设置translate3d 属性会将动画渲染到最上面一层，从而导致层级错乱，在低层设置transform: translate3d(0, 0, 0);高层设置transform: translate3d(0, 0, 2px);设置translate3d动画在ios上导致层级错乱问题，设置了z-index为999也不行。这样子低层设置了动画就不会跑到高层上面显示。

理解CSS z-index：层级关系与优先级解析

"理解CSS z-index 层级关系优先级" 在CSS中，z-index属性是用于控制元素在三维空间中的堆叠顺序，它决定了哪些元素会出现在其他元素的前面或后面。这个概念对于创建交互式和动态的网页布局至关重要。以下是对z-...