关于tranform: translate 后,元素被覆盖的问题
时间:2021-09-01
本文章向大家介绍关于tranform: translate 后,元素被覆盖的问题,主要包括关于tranform: translate 后,元素被覆盖的问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
影响了两天的问题,终于解决了,各种js计算高度,平移,结合c3,最后发现js计算后,是c3层级问题,希望能帮到园友,说明如下:
问题:
当一个或多个元素同时使用 如 transform: translateY(-100px);时, transform会默认 修改 元素的层级关系,
即,会出图一这种,下方蓝色元素向上平移时,遮挡上方红色元素的现象。
思路:知道是层级关系的问题,就可以使用 position中的 z-index 来自定义修改原色的层级关系即可;
(注,修改z-index时,注意项目代码中其他使用z-index中是否会受影响!!!)
解决后的,如图二中,下面蓝色元素向上平移时,在 上方红色元素下面。
一、出现问题的效果及代码
1、贴效果图
2、贴代码
<!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>Document</title> <style> div { width: 180px; height: 180px; background-color: red; } .child1 { transform: translate3d(0,0,0); } .child2 { background-color: blue; } .child2 { transform: translateY(-100px); } </style> </head> <body> <div> <div class='child1'></div> <div class='child2'></div> </div> </body> </html>
二、准确的效果图及代码
1、效果图
2、贴代码
<!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>Document</title> <style> div { width: 180px; height: 180px; background-color: red; } .child1 { transform: translate3d(0,0,0); position: relative; z-index: 10; } .child2 { background-color: blue; position: relative; z-index: 2; } .child2 { transform: translateY(-100px); } </style> </head> <body> <div> <div class='child1'></div> <div class='child2'></div> </div> </body> </html>
原文地址:https://www.cnblogs.com/-roc/p/15213487.html
- hive启动后相关操作
- 开源API测试工具 Hitchhiker v0.10 - 中文版
- 强大的API测试工具Hitchhiker v0.9 基于UI的断言测试,回顾2017
- 开源API测试工具 Hitchhiker v0.8 - 自动化测试结果统计
- 开源API测试工具 Hitchhiker v0.7更新 - Schedule的对比diff
- com.mysql.jdbc.exceptions.jdbc4.CommunicationsE...
- 简陋的swift carthage copy-frameworks 辅助脚本
- 【自问自答】关于 Swift 的几个疑问
- 高级PHP应用程序漏洞审核技术【一】
- 【读书笔记】The Swift Programming Language (Swift 4.0.3)
- Ubuntu 下mysql常用操作
- JDK1.8源码(五)——java.util.ArrayList 类
- 代码审计入门总结
- ubuntu mysql启动|停止|重启
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP模版引擎原理、定义与用法实例
- python如何查看安装了的模块
- Linux下源码包安装Swoole及基本使用操作图文详解
- python实现简易版学生成绩管理系统
- PHP中localeconv()函数的用法
- 解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
- PHP数据对象映射模式实例分析
- Pytorch 解决自定义子Module .cuda() tensor失败的问题
- PHP异常类及异常处理操作实例详解
- PHP面向对象程序设计(OOP)之方法重写(override)操作示例
- Python3与fastdfs分布式文件系统如何实现交互
- PHP判断是否微信访问的方法示例
- Pytorch损失函数nn.NLLLoss2d()用法说明
- python实现学生成绩测评系统
- Python dict的常用方法示例代码