position: fixed;失效不好用 因为 主体使用动画css3 animation transform

最新推荐文章于 2023-05-12 14:27:30 发布
最新推荐文章于 2023-05-12 14:27:30 发布
阅读量799 收藏
点赞数
分类专栏： css Js 文章标签： css js fixed position: fixed fixed失效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x1a0x0/article/details/104055263
版权
Js 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
css
2 篇文章 0 订阅
订阅专栏

暂时解决办法 动态取消样式 而后从新赋值；

       var domentClasscu = document.body.className ;
        document.body.className = '';

执行动态效果完成后

         document.body.className =  domentClasscu;

有更好的方法的大牛，求留言

x1a0x0
关注
专栏目录
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 6397
h5(html5)+css3+移动端前端 知识点详细总结
闪烁？卡顿？CSS硬件加速了解一下（will-change属性详解）
漫磋嗟
10-07 3425
如果你曾经注意到过基于WebKit的浏览器在执行某些CSS操作（尤其是transform和animation）时出现的“闪烁”，那么你很可能接触过“硬件加速”这个术语。
用background-attachment:fixed做动画效果
kbx8916的博客
11-19 238
链接
css3的transform属性会限制position:fixed的跟随效果，导致fixed定位失效
song527002517的博客
07-31 1358
position:fixed是相对于浏览器窗口生成的固定定位，可以让元素不跟随浏览器的滚动条而滚动。但是当父元素的css加了个transform属性值，原本应该固定在窗口上的fixed元素就会失效，变成跟着滚动条滚动了。 ...
关于使用animate与position：fixed冲突的问题解决
weixin_43989837的博客
09-07 1424
一，问题描述 在使用animate之后使用position：fixed；fixed定位的元素会变得能够滚动了，不再一直悬浮在固定位置 二，解决方法。 2.1：是否使用animate的元素有增大旋转等动作，如果有是否因为这些动作而改变了父级元素的宽高，如果改变了body的宽高，fixed就会重新计算，会造成影响。 2.2：使用animate的时候特别是元素旋转，需要注意不要让元素为长方形，应该尽量做成正方形，长方形旋转很容易造成body的改变。 ...
一个元素调用css3动画 fixed元素会微抖动
weixin_30715523的博客
05-25 133
html中元素调用css3动画，其他带有fixed属性的元素会微抖动。 原因不明。 解决方法是给带有fixed属性的元素加transform:translateZ(0) 转载于:https://www.cnblogs.com/coldhee/p/9087299.html...
关于动画：JavaScript动画、CSS动画、图层处理、HTML5的canvas及层叠上下文
hhhh
04-27 757
CSS动画相对于早期的JavaScript动画有很多的性能提升 CSS图层 浏览器会把页面切分为多个图层，每个图层有一个或多个节点，在渲染DOM的时候，浏览器实际的工作 获取DOM后分割为多个图层 对每个图层的节点计算样式结果 为每个节点生成图形和位置 在图层位图中绘制每个节点 图层作为纹理上传至GPU 复合多个图层至页面 每个图层中元素尺寸变化都会影响到别的元素 CSS通过transform位移、scale伸缩、rotate旋转、skew倾斜、matrix矩阵转换、perspective透视图提供
前端面试-CSS
wanglu458512的博客
09-19 2985
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
HTML+CSS+盒模型+flex布局+H5和CSS3新特性
m0_62351434的博客
01-12 517
目录HTML&C一、盒模型二.BFC三、清除浮动四、position定位的属性方法1. position: static;**2. position: relative;****3. position: absolute;****4. position: fixed;****5. inherit****6. sticky (黏性定位,吸顶效果)**五 、盒子水平垂直居中六、两栏布局、三栏（圣杯、双飞翼）作用：圣杯布局：优缺点：双飞翼布局：优缺点：圣杯与双飞翼的区别七、Flex 布局八、行内元素.块级
CSS实现模拟position的fixed页面定位效果
09-25
主要为大家介绍了CSS实现模拟position的fixed页面定位效果的方法,可通过absolute绝对定位来实现fixed的固定位置效果,非常具有实用价值,需要的朋友可以参考下
css导致position:fixed属性不生效的原因
cy1502的博客
05-12 796
1.transform 属性值不为 none 的元素;2.父级元素存在position:fixed;
transform 遇上 position: fixed
weixin_34358092的博客
06-16 591
最近遇到一个有意思的现象，以下 demo 中 fixed 的元素没有相对 viewport 定位，而是相对于它的父元素进行定位。 <html> 　　<head> 　　<style> 　　　　.parent { 　　　　　　width: 200px; 　　　　　　height: 300px; 　　　　　　background: yellow; ...
transform影响position: fixed的解决方法
ferwagrea的博客
03-29 2035
在transform不为none的元素中，定位是会受到影响的。
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;"
新版谷歌transform对position:fixed定位的影响
u012896719的博客
12-28 360
css
transform导致溢出_transform与position:fixed的那些恩怨
weixin_36401802的博客
02-22 655
1. 前言在写这篇文章之前，我理解的fixed元素是这样的：(摘自CSS布局基础)固定定位与absolute定位类型类似，但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与backgroun...
fixed定位失效，transform影响普通元素
技术前端，忠于热爱 @回忆哆啦没有A梦
04-18 1534
fixed定位失效，transform影响普通元素;CSS3 transform对普通元素的N多渲染影响
transition动画过渡没作用（无效）
热门推荐
weixin_45689946的博客
10-27 1万+
transition无效的原因 1、只给该元素赋予了过渡属性的结束值，并未在过渡前定义初始值。 css .header { position: relative; width: 200px; height: 50px; background: red; transition: all 0.3s ease-in-out; } .showMenu.layui-layout-admin .header{ left:-200px; } js $(".moveHandle").click(functio
小程序 scroll-view 中position: fixed失效和position: absolute效果一样
最新发布
07-28
哦，对于小程序中的 `scroll-view` 组件，`position: fixed` 确实会失效，并且会与 `position: absolute` 产生相同的效果。这是因为在小程序中，`scroll-view` 组件与 `position: fixed` 的定位方式不兼容。 `scroll-view` 组件是一个可滚动的区域，并且在滚动时会对内部的子组件进行相对定位。因此，当你在 `scroll-view` 中使用 `position: fixed` 时，它实际上会被解析为 `position: absolute`，并且相对于 `scroll-view` 的内容区域进行定位，而不是相对于整个页面。 如果你想要在小程序中实现固定定位效果，你可以考虑使用其他的方式，比如通过 `z-index` 和 `wx.getSystemInfoSync()` 来获取窗口高度进行计算，然后通过监听 `scroll-view` 的滚动事件来实现效果。或者你可以尝试将 `scroll-view` 组件嵌套在一个固定定位的父容器中。 希望对你有所帮助！如有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值