张老师总结的，感谢！

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

     .test1-wrap,.test2-wrap{

         border: 1px dashed #000;

         margin-bottom: 20px;

     }

     /* 解决办法一 */

     .test1-wrap .overflow{

         overflow: hidden;

     }

     .test1-wrap .test1-top{

         position: absolute;

         width: 200px;

         height: 50px;

         background-color: green;

         z-index: 999;

         /* 解决办法二 */

         /* transform: translateZ(100px); */

     }

     .test1-wrap .test1-bot{

         width: 100px;

         height: 100px;

         background-color: red;

         transform: perspective(300px) rotateY(40deg);

     }

     .test2-top{

         width: 100px;

         height: 100px;

         background-color: red;

         /* 照理说这个会在下面，可是加了这句话就会跑上来了 */

         transform: scale(1);

     }

     .test2-bot{

         margin-top: -50px;

         width: 100px;

         height: 100px;

         background-color: green;

     }

     .test3-top{

         width: 100px;

         height: 100px;

         position: fixed;

         top: 300px;

         right: 0;

         background-color: #000;

     }

     .test4-wrap{

         width: 100px;

         height: 100px;

         border: 10px solid #000;

         overflow: hidden;

         margin-bottom: 100px;

     }

     .test4-top{

         width: 150px;

         height: 150px;

         background-color: green;

         position: absolute;

     }

     .test5-wrap{

         width: 200px;

         height: 200px;

         border: 1px solid #333;

         transform: scale(1);

     }

     .test5-top{

         position: absolute;

         width: 100%;

         height: 100%;

         background-color: red;

     }

     </style>

 </head>

 <body style="height: 1000px;">

     <!-- Safari 3D变化后忽略层级 -->

     <div class="test1-wrap">

         <div class="test1-top"></div>

         <div class="overflow">

             <div class="test1-bot"></div>

         </div>

     </div>

     <!-- 提升元素的垂直地位 -->

     <div class="test2-wrap">

         <div class="test2-top"></div>

         <div class="test2-bot"></div>

     </div>

     <!-- position:fixed变absolute -->

     <div class="test3-wrap" style="transform: scale(1);">

         <div class="test3-top"></div>

     </div>

     <!-- 正常是不会隐藏的 -->

     <div class="test4-wrap">

         <div class="test4-top"></div>

     </div>

     <!-- Chrome/Opera不行 -->

     <div class="test4-wrap" style="transform:scale(1);">

         <div class="test4-top"></div>

     </div>

     <!-- 都行 -->

     <div class="test4-wrap">

         <div style="transform:scale(1);">

             <div class="test4-top"></div>

         </div>

     </div>

     <!-- 对定位的影响 -->

     <div class="test5-wrap">

         <div class="test5-top">dsfsdfsdf</div>

     </div>

 </body>

 </html>
function getCss(curEle,attr){

    var val = null,reg = null;

    // var val = reg = null;//这样写reg是全局的

    if(window.getComputedStyle){

        val = window.getComputedStyle(curEle,null)[attr];

    }

    else{// ie6-8

        if(attr === "opacity"){

            val = curEle.currentStyle["filter"];// alpha(opacty=10)

            reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;

            val = reg.test(val) ? reg.exec(val)[] /  : ;

        }

        else{

            val = curEle.currentStyle[attr];

        }

    }

    reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;

    return reg.test(val) ? parseFloat(val) : val;

}

小心transform的更多相关文章

  1. 小心 CSS3 Transform 引起的 z-index "失效"

    https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...

  2. CSS3 2D Transform

    在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...

  3. transform.localPosition操作时的一些注意事项

    移动GameObject是非常平常的一件事情,一下代码看起来很简单: transform.localPosition += new Vector3 ( 10.0f * Time.deltaTime, ...

  4. Gameobject.Find和Transform.Find应用区别

    using UnityEngine;using System.Collections; public class test : MonoBehaviour{ private GameObject ro ...

  5. Transform 引起的 z-index "失效"

    重新学习CSS后的第三天,学习制作阴影的过程中,发现的问题:设置了box-shadow后展现的阴影: 添加transform:rotate(10deg);后的效果: 查看CodePen例子:阴影效果 ...

  6. 【OI向】快速傅里叶变换(Fast Fourier Transform)

    [OI向]快速傅里叶变换(Fast Fourier Transform) FFT的作用 ​ 在学习一项算法之前,我们总该关心这个算法究竟是为了干什么. ​ (以下应用只针对OI) ​ 一句话:求多项式 ...

  7. 如何一步一步用DDD设计一个电商网站（九）—— 小心陷入值对象持久化的坑

    阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...

  8. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  9. 深入node之Transform

    Transform流特性 在开发中直接接触Transform流的情况不是很多,往往是使用相对成熟的模块或者封装的API来完成流的处理,最为特殊的莫过于through2模块和gulp流操作.那么,Tra ...

随机推荐

  1. 【甘道夫】Hadoop2.2.0 NN HA具体配置+Client透明性试验【完整版】

    引言: 前面转载过一篇团队兄弟[伊利丹]写的NN HA实验记录,我也基于他的环境实验了NN HA对于Client的透明性. 本篇文章记录的是亲自配置NN HA的具体全过程,以及全面測试HA对clien ...

  2. NGINX配置文件优化示例

    Nginx主配置文件 upstream.conf配置文件 # server nginx配置文件最好分开写,不要把所有的逻辑都放在一个文件里面,会看着很麻烦,,之前我的配置文件都放一起了,,导致现在维护 ...

  3. 基于togglepoolmember.pl编写F5设备控制模块

    为了方便利用python对F5设备进行操作,本文将togglepoolmember.pl对F5设备的控制写成了python模块,源代码例如以下: #!/usr/bin/python # -*- cod ...

  4. sqlserver中的时间比较

    例子: select count(*) from table where DATEDIFF ([second], '2004-09-18 00:00:18', '2004-09-18 00:00:19 ...

  5. 模拟struts2

    利用到的技术:dom4j和xpath 自己写一个Filter 在doFilter中拦截请求 // 2.1 得到请求资源路径            String uri = request.getReq ...

  6. MySQL 忘记密码解决办法

    第一步: 关闭MySQL服务.  第二步: 打开DOS窗口,在里面输入安装MqSQL的目录本机为:C:\Program Files\MySQL\MySQL Server 5.6\bin 第三步: 在命 ...

  7. 微信小程序页面之间的跳转

    一.使用标签跳转             index.wxml:             在index.wxml页面添加一个<navigator>元素,在元素里面使用属性url就可以 二. ...

  8. ICMP控制报文协议

    1.引言 ICMP经常被认为是IP层的一个组成部分.它传递差错以及其他需要注意的信息.ICMP报文通常被IP层或更高层 协议(TCP或UDP)使用.一些ICMP报文把差错报文返回给用户进程.ICMP报 ...

  9. 九度OJ 1042：Coincidence（公共子序列） （DP）

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2303 解决:1241 题目描述: Find a longest common subsequence of two strings. 输入 ...

  10. Django框架创建数据库表时setting文件配置_模型层

    若想将模型转为mysql数据库中的表,需要在settings中配置: 一. 确保配置文件中的INSTALLED_APPS中写入我们创建的app名称-->bms INSTALLED_APPS = ...