Transform 属性会导致子元素的 fixed 属性失效

在项目中，需要为顶部导航条增加滚动跟随效果。很显然，只需要为 #header 加上 position:fixed; 属性即可，但是加上之后却无效。只能用监测浏览器滚动距离然后实时的赋值到 top 属性来模拟跟随。

但是这种方法由于浏览器之间滚动的距离不同等缘故，会导致闪烁等问题，只在 Firefox 效果完美。同时会影响性能，在中低端安卓设备中效果很差。这种影响用户体验的事情，是肯定要避免的。还是得回来使用 fixed，但是从未发现过 fixed 失效的情况啊，只能挨个测试一下。

问题发现
先写了一个 div ，赋值 fixed 属性，然后在普通网页中效果正常。将其插入无效代码平级位置，结果失效。将其插入 body 标签下级，正常。说明问题出在其父属性值中。

然后使用 Firebug 依次取消父属性值，当去掉 transform 属性值之后，fixed 生效。原来问题出在 transform 上。

然后就做了个 Demo 测试一下。

 代码如下 复制代码

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
 <title>Transform 属性会导致子元素的 fixed 属性失效 Demo 页面</title>
 <link rel="stylesheet" type="text/css" href="../base.min.css" />
 <script type="text/javascript" src="jquery.min.js"></script>
 <!--[if lt IE 9]>
 <script src="/js/html5.js"></script>
 <![endif]-->
 
 <style>
 .fixed{position: fixed;top:10px;left:10px;width:50px;height:50px;background: blue;}
 .notransform{width:200px;height:200px;background: red;}
 .transform{width:200px;height:200px;background: green;-webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg);}
 </style>
 
 <script>
 
 
 </script>
 
</head>
<body>

</header>

<article class="main-wrap">
<div class="main">
 <h2>效果</h2>
 <div class="show">
  <div class="notransform">
   <div class="fixed"></div>
  </div>
  <div class="transform">
   <div class="fixed"></div>
  </div>
 </div>
 <h2>代码</h2>
 <h3>HTML结构</h3>
 <div class="code">
  <pre>&lt;div class="notransform"&gt;
 &lt;div class="fixed"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="transform"&gt;
 &lt;div class="fixed"&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
 </div>
 <h3>CSS代码</h3>
 <div class="code">
  <pre>.fixed{position: fixed;top:10px;left:10px;width:50px;height:50px;background: blue;}
.notransform{width:200px;height:200px;background: red;}
.transform{width:200px;height:200px;background: green;-webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg);}</pre>
 </div>
 <h3>JS代码</h3>
 <div class="code">
  <pre>无</pre>
 </div>
</div>
</article>

</body>
</html>

这是一个坑，如果不知道的，可以记一下。因为 transform 是一个 CSS3 中比较重要的动画属性，以后的应用会越来越多。对于 position 的其他属性尚未测试，因为 fixed 比较特殊，效果比较明显

时间： 2024-09-14 22:42:37

Transform 属性会导致子元素的 fixed 属性失效的相关文章

border-radius 应用了 transform 的子元素 overflow:hidden 失败如何解决

在一个应用了 border-radius 的圆角元素上,加上 overflow:hidden.子元素铺满.对于子元素超出圆角的部分可以被隐藏掉.形成一个圆角头像容器的结构.代码如下: HTML <div id="wrapper">     <div id="box"></div> </div> CSS #wrapper {     position: absolute;     width: 200px;     he

WPF中如何查找数据模板中的子元素

前两天在写一个WPF程序时,突然发现DataGrid控件没有筛选功能,但我不急,因为我知道,WPF的好处在于UI与逻辑的分离,要给数据网格控件加上输入筛选功能并不复杂,也不用去找第六方控件了,直接从DataGrid类派生一个类,并重定义它的控件模板,在DataGrid原有的控件模板上加一个StackPanel就可以了,方向为水平排列,放在列标头的下方.然后在代码中根据各个列的情况,向那个StackPanel添加N个文本框就可以输入筛选信息了.呵呵,虽不算完美,解决燃眉之急还是可以的. 这样我就想

js基础之DOM中元素对象的属性方法详解_javascript技巧

在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

CSS技巧知识：子元素浮动后父容器的闭合

css|浮动|技巧 最近两个月断断续续做了好几个网站的美工,做的过程中对DIV+CSS的标准开发有了进一步的了解.有两点收获最大,一是彻底弄懂了CSS的盒子模式(Box Model),再一个就是搞定了困扰我很久的"闭合浮动元素"的问题: 一般说来如果某个子元素使用了浮动(float),那父元素总是不能确切地知道子元素是在什么位置结束的,所以父元素的下边框总是从子元素的中间甚至是顶部穿过,看起来很不舒服. 最早时我都是在子元素结束后单独加个<br />或<div>

jquery查找父元素、子元素

 对使用js或者jquery查找父元素.子元素比较混淆的朋友可以参考下本文,因为是个人总结,用起来会比较方便 使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多    这里jquery向上查找父元素 用到的方法:closest() parents() parent()    向下查找子元素 用到的方法:find() children()    js用的是 children[] 属性    html代码   代码如下: <!DOC

js遍历 子节点 子元素

js遍历 子节点 子元素   Js 节点 子元素 属性 方法    // 添加子节点前 删除所有子节点   var usernameEle = document.getElementById("username");   var childs = usernameEle.childNodes;       for(var i = childs.length - 1; i >= 0; i--) {             usernameEle.removeChild(childs

jQuery子元素过滤选择器用法示例_jquery

本文实例讲述了jQuery子元素过滤选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="te

JS子元素oumouseover触发父元素onmouseout

原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父级的onmouseout后又触发onmouseover:从子级移入父级后再次触发父级的oumouseout后又触发onmouseover.而如果onmouseover内又应用了计时器便会存在较大的问题.下面针对此问题给出解决方案. 首先,在给出解决方案之前,必须先弄清楚几个对象及方法,分别如下: 1

jquery查找父元素、子元素(个人经验总结)_jquery

使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents() parent() 向下查找子元素 用到的方法:find() children() js用的是 children[] 属性 html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"