css-transform对position:fixed影响

最新推荐文章于 2024-02-26 17:15:33 发布
最新推荐文章于 2024-02-26 17:15:33 发布
阅读量1.5k 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013447988/article/details/105551458
版权

在betterScroll尝试使用position:fixed固定首列，然而并不能实现固定。因为 bscroll / iscroll 是基于 transform 属性实现滚动的, 所以 iscroll 会通过实时修改元素的 transform 属性以达到滚动的效果。父元素如果存在 transform 属性，子元素的 position: fixed 属性无效。betterScroll有个 useTransition配置项，设置为true使用 CSS3 transition 动画。 false的话则使用 requestAnimationFrame 做动画。这样就可以使用fixed固定，但是使用requestAnimationFrame 滑动不如使用transform流畅。

参考资料

不知道取啥名2021
关注
专栏目录
CSS定位\CSS过渡
weixin_69105353的博客
06-23 357
实训期间的一些笔记记录，有错望指正唷~
fixed定位失效，transform影响普通元素
技术前端，忠于热爱 @回忆哆啦没有A梦
04-18 1535
fixed定位失效，transform影响普通元素;CSS3 transform对普通元素的N多渲染影响
css transform 会影响position 定位
最新发布
02-26 718
解决办法是.动画操作的对象不应该是包含子元素的li,可以是li下面的a这个子元素.比如这样就行了。比如通过以下代码.实现导航条上的每个li栏目,以不同的时间间隔,从上向下移动进来并显示。如下图,li下面还有menu这个子元素.所以.动画修改到a上.但是,如果my-navbar ul li 这个。
当 position:fixed 遇上 transform
MaRain
09-18 1173
前言任务是 iscroll.js 做滑动效果， 需要滑动到一定位置的时候 滑动里面的元素 停留在 窗口的最顶端，我想的是 检测一下当到位置是 把元素设置成 position:fixed 就可以了。但是事实是并没有，设置了属性还是照样 可以滑动，这让我很费解。原因iscroll.js 在外层的div 上设置了 transform ,而 这个元素影响了 position:fixed 让他只
CSS小技巧之position和transform
chaocainiao的博客
09-13 633
position 属性指定了元素的定位类型,CSS中常用的定位属性.元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。 transform是css3中的一个特征，可以实现元素的缩放，位移，变形。 属性值： scale：缩放 translate 位移 rotate 旋转 skew 倾斜 此次使用position和transform实现一个旋转的太极图案.
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案 iOS 中 position:fixed 吸底时的滑动出现抖动是前端开发中常见的问题之一。这个问题的出现主要是由于 native 和 h5 两个原因引起的抖动。native 的抖动是...
css中position:fixed实现div在窗口上下左右居中
09-25
对于旧版IE浏览器，如IE6，可能不支持position:fixed或者transform属性。在这种情况下，可以通过设置_position:absolute作为兼容性写法，确保在不支持fixed的浏览器中，元素仍然能够尽可能地居中。 在实现居中时，...
css3 position fixed固定居中问题解决方案
09-25
然而，当尝试将一个`position: fixed`的元素居中时，常规的居中对齐方法如 `margin: 0 auto` 可能不再有效，因为`fixed`定位使元素脱离了正常文档流，不再受到父元素的影响。 通常，我们使用 `margin: 0 auto` 来...
#fixed-button { width: 50px; height: 50px; border-radius: 50%; background-image: url("images/service.png"); background-repeat: no-repeat; background-size: cover; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; }什么意思
06-03
- `position: fixed;` 让按钮的定位方式为固定，即不随页面滚动； - `top: 50%;` 将按钮向上偏移50%的页面高度； - `left: 50%;` 将按钮向左偏移50%的页面宽度； - `transform: translate(-50%, -50%);` 让按钮水平...
transform影响position: fixed的解决方法
ferwagrea的博客
03-29 2036
在transform不为none的元素中，定位是会受到影响的。
transform对定位的影响/fixed失效
zoey的博客
07-06 1588
场景： 元素fixed定位，始终位于视口某一个位置，但是并没有按照预想实现固定定位，最后查到问题是transform引起的；根据w3c的解释是transform会创建新的包含块，fixed以及absolute都会以改元素定位； position:fixed在遇到有transform祖先元素时，定位的相对对象变为该元素/最近的有定位的父级,表现为相对于该元素绝对定位 position:absolute在遇到transform祖先元素时，定位的相对对象变为该元素/最近的有定位的父级 fixed定位失
position：fixed使用注意事项（父容器有transform时）
weixin_42365700的博客
04-15 1406
问题 原本fixed是按照浏览器窗口定位的，父级用了transform会导致fixed参照父级容器定位（相当于absolute） 解决 当下图红框弹出来后，点击展开子表格时去掉含有transform的类 下图红框使用transform（animation.css插件）从浏览器最右边淡出弹出，黄色框使用了position:fixed，谷歌、360等等都没有问题；领导用的火狐，结果就只有火狐悲催了，w...
css3的transform属性会限制position:fixed的跟随效果，导致fixed定位失效
song527002517的博客
07-31 1360
position:fixed是相对于浏览器窗口生成的固定定位，可以让元素不跟随浏览器的滚动条而滚动。但是当父元素的css加了个transform属性值，原本应该固定在窗口上的fixed元素就会失效，变成跟着滚动条滚动了。 ...
写商城项目的时候引用better-scroll的时候遇到的position：fixed样式不生效的问题
huangxinyi123的博客
05-31 331
写商城项目的时候引用better-scroll的时候遇到的position：fixed样式不生效的问题 中间的导航栏原本是用的position：fixed，用户一直滑动到某个位置，导航栏就会停留在顶部的效果，但是一旦引用了better-scroll滚动条，我的CSS样式就不生效了，于是我在首页这个组件最上面, 多复制了一份导航栏组件, 利用它来实现停留效果. 当用户滚动到一定位置时, 上面的导航栏显示出来. 当用户滚动没有达到一定位置时, 导航栏隐藏起来. 让上面的导航栏和下面的导航栏点击后的位置一致
关于transition动画下，如果有fixed元素，渲染的奇葩问题
weixin_34290000的博客
03-26 715
之前我们机票页面有生成一个低价日历，然后我们有一个需求就是滚动到那个月份，对应显示这个月，然后这个区域是fixed定位的，然后奇怪的事情发生了，就是低价日历的动画执行完后，修改页面的html却没有正常更新。（因为那个区域显示有点问题，我截图的地方也是fixed元素）然后大家可以看到以上截图，改变了dom后页面没有重新渲染（可以这里用词有误，反正是没有渲染正常。） 然后我就找了小钗（http:/...
transform属性限制position:fixed的定位效果
Harvey Wang的博客
05-20 6253
　　最近在做项目的过程中需要实现一个导航按钮固定的效果，但是即使在div上加上position:fixed样式，div还是没有固定。怎么尝试都不行。后来前端的同事查了一下资料说可能是弹窗的div中有transform属性导致position:fixed失效了。 　　自己开始查看一下弹窗的div的css样式，在css样式中使用transform: translate(-50%,-50%)来使整个d...
transform限制position:fixed的跟随效果
qq_36904182的博客
10-12 867
我们应该都知道，position:fixed可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了。但是，真是一物降一物，position:fixed固定效果却被小小的transform给干掉了，直接降级变成position:absolute的蛋疼表现。 例如下面示意代码： <p style="transform:scale(1);"><img src="mm1.jpg"style="position:fixed;"
CSS显示属性上的过渡
p15097962069的博客
12-09 1361
我目前正在设计CSS“巨型下拉菜单”-基本上是一个常规的仅CSS下拉菜单，但其中包含不同类型的内容。 目前， 似乎CSS 3过渡不适用于'display'属性 ，即，您不能执行从displa
不要乱用position:fixed
weixin_30371469的博客
07-12 3416
经常会有一个需求，在一个固定窗口内容滚动，底下有操作按钮需要固定，不随着滚动，一般第一个念头就是用固定定位position: fixed，但是fixed是以窗口为父元素去定位的，这么做肯定是错的，需要正确使用相对定位和绝对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值