最近的项目是要实现一个点击显示隐藏边栏的效果，而且需要边栏随着滚动而滚动。

思路简单，不就一个css的动画和一个position为fixed，搞定！但不想，设为fixed的子元素竟然无法fixed，这下颠覆我了。千辛万苦，细致排除，终于发现是transform导致的fixed失效，而且目前似乎没有解决方案，除非绕过。同时，也借此算是彻底知道百度跟google的差距了。

有两篇较有用的文章谈到了这个，地址分别是http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/和http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue，可借此参考！

关于在transform下的子元素设置fixed无效的困惑的更多相关文章

  1. display:flex;下的子元素width无效问题

    因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性. 该属性介绍: 一个数字,规定项目将相对于其他灵活的项目进行收缩的量. 根据上述介绍可以理 ...

  2. 关于元素设置margin-top能够改变body位置的原因及解决（子元素设置margin-top改变父元素定位）

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  3. 子元素设置margin-top后，父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. 解决子元素设置margin-top，效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  5. jquery层级原则器（匹配父元素下的子元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 解决：子元素设置margin-top，父元素也受影响的问题

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...

  7. CSS子元素设置margin-top作用于父容器？

    CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

  8. 子元素设置margin-top作用到了父元素

    子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解

  9. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. java include包含指令例子

    1.项目架构 2. 代码 (1)top.jsp 2.copyright.jsp 3.index.jsp 4.效果图: 5.总结 期间也碰到过很多问题,例如我刚开始不是创建的java动态项目而是java ...

  2. .net performance

    http://msdn.microsoft.com/en-us/library/ms173196.aspx http://www.zhihu.com/question/20314377 http:// ...

  3. /dev/urandom

    /dev/urandom则是一个非阻塞的发生器: dev/random的一个副本是/dev/urandom (”unlocked”,非阻塞的随机数发生器),它会重复使用熵池中的数据以产生伪随机数据.这 ...

  4. BZOJ3297: [USACO2011 Open]forgot

    3297: [USACO2011 Open]forgot Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 54  Solved: 38[Submit][ ...

  5. .OCX、.dll文件注册命令Regsvr32的使用

    1.打开文件,打开需要注册的OCX文件或dll文件,2.然后根据需要进行OCX文件或DLL文件的注册和反注册 DLL.OCX注册方法--文件Regsvr32用法及情况介绍 使用过activex的人都知 ...

  6. 2014-08-13　SQL语句之Left Join

    今天是在吾索实习的第26天.这天在处理数据库数据的时候发现了一个不错的语句就是Left Join,即左连接.  其功能是:即使右表中没有匹配,也从左表返回所有的行.也就是说,显示的行数与左表一致,且当 ...

  7. MemSQL 3.1 发布，元方，你怎么看？ - V2EX

    MemSQL 3.1 发布,元方,你怎么看? - V2EX MemSQL 3.1 发布,元方,你怎么看?

  8. Easyui获取数据库date数据的显示

    众所周知Oracle数据库中的date与众不同,在Easyui中显示数据库的date类型如果不经过转化为显示为Object.因此需要经过处理. 1.首先你要写转化date的JavaScript < ...

  9. POJ 3723 Conscription

    Conscription Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6325   Accepted: 2184 Desc ...

  10. html——基础样式篇（1）

    格式化标签 <b>字体加粗标签 <i>字体斜体标签 <sub>下标标签 <sup>上标标签 <del>删除标签 //这在商品特价时常使用 a ...