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

思路简单，不就一个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. Spring碎点知识

    1.依赖注入:不仅可以为Bean注入普通的属性值,还可以注入其他Bean的作用.通过配置文件组织在一起,这里的Bean是Java对象 说明:关于依赖注入与控制反转的这两个名字,表达的都是同一个意思,只 ...

  2. 采访：Go语言编程

    Go语言是由Google在2009年11月份公布的,它的目标是要应对软件开发所面临的最新挑战.Go语言特别被设计为快速(包括在编译时).支持多核的语言,并且兼顾了动态语言的简单性和静态类型语言的安全性 ...

  3. 突破路由mac地址过滤思路

    一.获取合法的mac地址 在拿到无线网络的密码时,主要思路就是,用类似airodump-ng这类监听软件(WildPackets OmniPeek,Kismet),获得合法客户端的mac地址,然后再更 ...

  4. Ubuntu14.04 weblogic11g集群环境测试

    在当前域下面新建两个服务器,服务器信息设置: server1:127.0.0.1:7010 server2:127.0.0.1:7020 第一步:新建服务器 (1)进入“服务器”,点击新建: (2)填 ...

  5. c++四则运算代码

    //Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--& ...

  6. 【转】Linux中断处理学习笔记

    原文网址:http://www.cnblogs.com/GT_Andy/archive/2011/06/21/2086100.html 1．Linux中断的注册与释放: 在<linux/inte ...

  7. 嵌入式linux内核制作

    今天来总结一下mini2440的内核制作过程. 一. 将内核文件拷贝至目标目录,解压. 二.清除中间文件 命令:make distclean 三.配置内核文件 将开发板厂商制作好的内核文件拷贝至内核文 ...

  8. iOS语音识别，语音播报，文字变语音播报，语音变文字

    首先使用的是科大讯飞的sdk 1.语音识别部分 AppDelegate.m #import "AppDelegate.h" #import <iflyMSC/iflyMSC. ...

  9. lesson5:Condition的原理分析及demo展示

    Condition 将 Object 监视器方法(wait,notify,和notifyAll)分解成截然不同的对象,以便通过将这些对象与任意Lock实现组合使用,为每个对象提供多个等待 set(wa ...

  10. DB2 错误编码 查询（一）（转）

    size=medium][/size]本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子代码,请参阅相应的表. 表 2. SQLSTATE 类代码 类代码含义 要获得 ...