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

思路简单，不就一个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. 【docker】docker初试与填坑

    docker是最近很流行的部署方式,最近尝试之前的项目都转移到docker上运行,下面是碰到的一些坑和解决方案. 网络问题 因为国内的原因,docker pull 镜像的时候经常碰到连不上或者速度极慢 ...

  2. [kuangbin带你飞]专题十 匹配问题 二分图最大权匹配

    二分图最大权匹配有km算法和网络流算法 km算法模板默认解决最大权匹配的问题 而使用最小费用最大流 是解决最小权匹配问题 这两种办法都可以求最大最小权 需要两次取反 TAT 感觉讲km会很难的样子.. ...

  3. javaWeb实现使用邮箱邮件找回密码功能

    JSP+Jmail+JavaBean 发邮件(转)2010-08-23 18:052007年04月14日 14:32/* * SendMail.java * * Created on 2007年3月3 ...

  4. MyVoix2.0.js 源码分析 WebSpeech与WebAudio篇

    楔 子 随着移动互联网时代的开启,各种移动设备走进了我们的生活.无论是日常生活中人手一部的手机,还是夜跑者必备的各种智能腕带,亦或者是充满未来科技感的google glass云云,它们正渐渐改变着我们 ...

  5. 探讨VMP 2.12.3 导入表修复

    壳版本:VMProtect.Ultimate.2.12.3 样本:notepad.exe 目的:IAT修复 作者:MrWrong 标题:探讨VMP 2.12.3 导入表修复 只是感兴趣,没有其他目的. ...

  6. android更新SDK时候丢失annotations.jar 导致支持库报错

    I am trying to update my Android SDK Tools to 17 rev. and I updated usign SDK Tools but in Propertie ...

  7. C51 库函数

    C-51软件包的库包含标准的应用程序,每个函数都在相应的头文件(.h)中有原型声明.如果使用库函数,必须在源程序中用预编译指令定义与该函数相关的头文件(包含了该函数的原型声明).例如:#include ...

  8. 俄罗斯方块：Python实现

    网上搜到一个Pygame写的俄罗斯方块(tetris),大部分看懂的前提下增加了注释,Fedora19下运行OK的 主程序: #coding:utf8 #! /usr/bin/env python # ...

  9. COJ 0560 4015划分数

    4015 划分数 难度级别:B: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 有n个无区别的物品,将他们划分成不超过m组,求出划分方法数模 ...

  10. cocos2d-x 头文件中添加方法变量导致编译报错

    代码如下: HelloWorldScene.h #ifndef __HELLOWORLD_SCENE_H__#define __HELLOWORLD_SCENE_H__ #include " ...