探究position:fixed在css动画过程中的行为~

补充: 是指transform动画

想要的效果

原本buttom_submit是通过position:fixed; bottom:0px;来定位到底部的, 然后结果显示那里做相同高度的padding的 , 所以还原问题配置

但是动画效果是这样的

有兴趣可以到这里改css试试

那么问题来了

所以动画过程中的position:fixed失效了 ? 是不是回归到文档流?

这时候使用Animations工具了 , Chrome Devtools位置:3 dot -> more tools -> Animations , 设置比较慢的速度

动画的时候按下暂停按钮~鼠标的位置~

然后就是调整设置~~

建议去实地试试~调调各种布局属性

可以从表现上看到

  1. 修改bottom的位置是无效的 , 同时修改margin-top也是无效的
  2. 只有增加bottom/top的属性才会出现这样的 , 后面试了left/right正常 , 并且配合margin也是正常的 , 调节其值也是有效果的
  3. bottom修改为top的表现 , 可以看出这时候的布局是参照所参与transform变换的元素
  4. 还有postion:fixed会导致一丢丢的垂直位置偏移

这就奇了怪了, position:fixed + top/bottom 才会导致各种布局失效 , left/right 却是正常的 , 怪怪的~~

那么说好的探究捏? 看来是需要真的了解fixed的布局的实现机制了~ 允许我先Google Google~

找到了这篇~CSS3 transform对普通元素的N多渲染影响

还有这篇transform你不知道的那些事

剩下的读者继续谷歌吧~ 我谷歌了一下原来问题2015的时候就被发现了~我就当作提供一个debug思路吧~ 利用Animations , 摸索差不多再更新个小结~[faceplam]逃~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

通过 JS 判断页面是否有滚动条的简单方法

前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁。最终通过参考不同方法,写了一个比较简单的方...

2209
来自专栏Web项目聚集地

3分钟理解响应式布局

总听别人说响应式布局,觉得是一个很高大上的东西,近日做的一个项目需要适配不同的屏幕尺寸,于是就简单研究了一下 Web响应式布局,其实原理很简单,下面就简单整理了...

712
来自专栏前端新视界

关于 CSS 反射倒影的研究思考

原文:The State of CSS Reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览。该文章篇幅较长,内容庞杂...

2779
来自专栏web编程技术分享

《从案例中学习JavaScript》之酷炫音乐播放器(二)

33713
来自专栏葬爱家族

Android高级动画(3)

上一篇文章我们讲了Android中的矢量动画,虽然文中展示的Demo并不多,但是相信大家还是体会到了矢量动画的强大。这里再做一个温故总结:

901
来自专栏编程直播室

WebGL 动画

1464
来自专栏阿凯的Excel

巧用格式刷解决合并单元格无法统计问题

最近小编一直在分享Python,有朋友和我聊! 我是谁!我来自哪里!我要去往何处! 好吧,为了能对得起我的名字《阿凯的Excel》 本小编决定每周不少于一...

3456
来自专栏李蔚蓬的专栏

HTML & CSS 知识点梳理(内涵大量Demo噢~)

1.<html>标记 <html>标记是HTML文件的开头。所有HTML文件都是以<html>标记开头,以</html>标记结束,HTML页面的所有标记都要放...

852
来自专栏我和未来有约会

[Silverlight 4 RC]RichTextBox概览

我们知道在silverlight 4 beta的时候增加了RichTextArea的控件。做过RIA开发的朋友富媒体在动态文本的表现渲染方面是很弱的。我们看到的...

1698
来自专栏程序猿DD

总是听别人说响应式布局,原来这么简单

作者:麻酱 原文:http://www.majiang.life/blog/head-first-responsive-web-design/ 前言 总听别人...

1905

扫码关注云+社区