关于在transform下的子元素设置fixed无效的困惑
最近的项目是要实现一个点击显示隐藏边栏的效果,而且需要边栏随着滚动而滚动。
思路简单,不就一个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无效的困惑的更多相关文章
- display:flex;下的子元素width无效问题
因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性. 该属性介绍: 一个数字,规定项目将相对于其他灵活的项目进行收缩的量. 根据上述介绍可以理 ...
- 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...
- 子元素设置margin-top后,父元素跟随下移的问题
子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...
- 解决子元素设置margin-top,效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...
- jquery层级原则器(匹配父元素下的子元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 解决:子元素设置margin-top,父元素也受影响的问题
<!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...
- CSS子元素设置margin-top作用于父容器?
CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...
- 子元素设置margin-top作用到了父元素
子元素设置margin-top,父元素也受影响 解决办法:给父元素加个padding或border或overflow:hidden或父元素加前置内容生成 CSS中盒模型的理解
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
随机推荐
- Statement执行DQL语句(查询操作)
import java.sql.Connection; import java.sql.ResultSet; import java.sql.Statement; import org.junit.T ...
- 获取MP3和M4A音乐文件的歌曲信息以及专辑图片--备用
NSBundle* bundle = [NSBundle mainBundle]; NSString* path = [bundle bundlePath]; NSURL * file ...
- iOS开发之UIWebView自动滑动到顶部-备
但可以通过subview来操作. 通常用UIWebView加载网页,有时候需要点击一个按钮,或者页面的某个部位,使页面自动滚动到顶部,但是UIWebView不像UIScrollView那么方便. ...
- 转:Twitter.com在用哪些Javascript框架?
原文来自于:http://blog.jobbole.com/63964/ 我一直在研究twitter.com使用的一些UI框架.下面是这些框架的清单(大部分是Javascript框架).如果你发现有些 ...
- /dev/urandom
/dev/urandom则是一个非阻塞的发生器: dev/random的一个副本是/dev/urandom (”unlocked”,非阻塞的随机数发生器),它会重复使用熵池中的数据以产生伪随机数据.这 ...
- Angular.js VS. Ember.js:谁将成为Web开发的新宠?
这篇博文陈述的非常好,比较全面的剖析了Angular.js与Ember.js,下面的链接,供学习与参考: http://www.csdn.net/article/2013-09-09/2816880- ...
- 在 SQL Server 2012 附加 Adventure Works 範例資料庫
原文地址:http://technet.microsoft.com/zh-tw/library/eb1f9417-4cca-4575-a725-187bcd60c7e7 附加数据库时报错 错误5123 ...
- 爬虫学习-使用CrawlSpider
使用scrapy中的CrawlSpider类来进行爬行 一直用的是BaseSpider,回调函数的方式,有一个问题是title,date在一个页面,author,detail在另一个页面时,怎么把这些 ...
- http常见错误
100:继续 客户端应当继续发送请求.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应. 101: 转换协议 在发送完这个响应最后的空行后,服务器将会切换到在Upgrade 消 ...
- 一款豪华绚丽的移动端图册(zepto.js+photoswipe.js)
应公司要求,开发一款移动端杂志(等同于移动端幻灯片相册,iOS上能轻松滑动缩放,android上也能滑动缩放).网上找了很久没有符合需求的插件,无意间找到了photoswipe,进行改造之后就成了符合 ...