CSS3 transform对fixed元素造成的影响笔记

在我们近期的一个项目中，碰到过这个问题，fixed元素居然好端端的失效了 ，后来不断的排查，最终发现了问题出在 CSS3 transform上的，只因为fixed元素的父层添加了 CSS3 transform属性。

我们应该都知道，position:fixed可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了。但是，真是一物降一物，position:fixed固定效果却被小小的transform给干掉了，直接降级变成position:absolute的蛋疼表现。

不过还好，目前只在Chrome浏览器/FireFox浏览器下有，其他浏览器均为正常。

作为笔记，也防止后人踩坑。

时间： 2024-12-06 21:59:07

CSS3 transform对fixed元素造成的影响笔记的相关文章

transform对定位元素的影响

1.基本概念 absolute:生成绝对定位的元素,相对于除position:static 定位以外的第一个有定位属性的父元素进行定位,若父元素没有定位属性则相对于浏览器窗口的左上角定位,定位的元素不再占据文档的空间. relative:生成相对定位的元素,相对于其正常位置进行定位,定位的元素仍然占据文档的空间. 2.transform对子元素定位的影响 父元素添加transform属性后,子元素定位参照变成父元素,包括定位left,top,和width.并且父元素任然占据位置,后面的兄弟元素不

利用CSS3的transform属性让元素在页面居中

今天学到让元素在页面中水平居中的新写法,利用了CSS3的transform属性,通过设置translate的值来改变元素的位置. 1.先来看看怎么实现的 页面中放一个div,width和height随便设置大小和背景色,以便查看效果: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>利用CSS3的

CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变

CSS3 : transform 用于元素样式的转变,比如使元素发生位移.角度变化.拉伸缩小.按指定角度歪斜 transform结合transition可实现各类动画效果 transform : transform 兼容各浏览器写法如下: 1 transform: /* 转变样式 */; 2 -ms-transform: /* 转变样式 */; /* IE 9 */ 3 -webkit-transform: /* 转变样式 */; /* Safari and Chrome */ 4 -o-tra

如何使用 css3 transform 属性来变换背景图？

本文和大家分享的主要是使用 css3 transform 属性来变换背景图相关内容,一起来看看吧,希望对大家学习css3有所帮助. 使用 css3 transform 属性可以轻易的旋转,倾斜,缩放任何元素.目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用 . 如果你要在黑莓浏览器或者 UC 浏览器使用这个属性, 你需要加 -webkit- 前缀. #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg)

CSS3 transform介绍 （简书）

transform本质上是一系列变形函数,分别是translate位移,scale缩放,rotate旋转,skew扭曲,matrix矩阵. 前置属性: transform-origin transform-style perspective perspective-origin backface-visibility 2D变形: translate scale rotate skew matrix 3D变形: translate3d scale3d rotate3d matrix3d 层级影响

CSS3 transform属性 附上demo

参考http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 用法 实例 刚开始使用这个属性是因为工作的需要,制作H5动画页面,通过查具体用法也可以制作出各种小动画,比如平移,缩放,翻动,刚开始看到这些动画都很惊奇,居然短短写一小段东西就就可以完成js写一堆代码的动画了,然后看到别人家的CSS3动画,再次被教育做人了. 下面说说怎么使用 transform 定义 :t

用 -webkit-mask-image 解决 border-radius 元素对应用了 transform 的子元素 overflow:hidden 失败的 BUG (WebKit下).

今天在网上学习的时候看到一个文章,感觉以后可能会用到,所以就COPY了过来,以便以后可以查阅,感谢 MaCheng 的分享,原文地址:http://blog.mc-zone.me/article/370 在 CSS3 的 border-radius 上能遇到很多坑.有关 Android 移动端各种兼容就不说了.最近又遇到一个 Webkit 下对于应用了transform 的子元素 overflow:hidden 失效的情况. 问题重现 在一个应用了 border-radius 的圆角元素上,加上

理解CSS3 transform中的Matrix(矩阵)

一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵)”的时候,难免会心生畏惧(即使你已经学过),正常心理.实际上,这玩意确实有点复杂. 然而,这却是屌丝逆袭的一个好机会. CSS同行间:你是不是有这样的感觉:哎呀呀,每天就是对着设计图切页面,貌似技术没有得到实质性地提升啊,或者觉得日后高度有限! 我们应该都知道二八法则(巴莱多定律),即任何一组东西中

css3 transform中的matrix矩阵

CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示意图:3D变换则是4*4的矩阵. 有些迷糊?恩,我也觉得上面讲述有些不合时宜.那好,我们先看看其他东西,层层渐进——transform属性. 具体关于transform属性具体内容可以点击这里补个课.稍微熟悉的人都知道,transform中有这么几个属性方法: .trans_skew { trans