新版谷歌transform对position:fixed定位的影响

最新推荐文章于 2023-03-29 16:52:02 发布

乁乁飞

最新推荐文章于 2023-03-29 16:52:02 发布

阅读量357

点赞数 1

分类专栏：前端文章标签：动画 css3 css

本文链接：https://blog.csdn.net/u012896719/article/details/122194361

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

position:fixed 一般是相对浏览器而言的定位，但如果父级存在transform样式，就会变成absolute定位。

以前的解决办法是：

在动画的最后一帧添加样式：transform: unset ,如：

@keyframes anim-open{
    0%{opacity:0;transform:scale3d(0,0,1)}
    99%{opacity:1;transform:scale3d(1,1,1)}
    100%{opacity:1;transform:unset}
}

但在最新版的谷歌浏览器发现也无效了，解决办法：

在使用了动画的父级添加样式：

transform:unset !important

也不会影响动画的样式

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

乁乁飞

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新版谷歌transform对position:fixed定位的影响

css
复制链接

扫一扫

专栏目录

css的z-index、position、overflow属性混合时Safari的兼容问题，fixed定位+z-index同时使用不生效问题

止喜的博客

07-24

1570

～～～转前端啦～～～问题：position: fixed和z-index同时使用在Safari浏览器中不生效？？？

自学前端第十八天:CSS精准定位position

weixin_47592060的博客

04-30

1320

超级重点:CSS精准定位(position) 一. ①CSS定位基本概念:如果说, float浮动关键在一个 “浮起来” 字上面，那么我们的position定位关键在于一个 “精准位” 上。 ②CSS定位目的上，如果说，浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的"任意坐标"位置上去。 ③CSS定位本质上: 不仅能像float浮动一样,可以脱离文档流束缚的情况下将元素放在你想放置的位置,还可以帮助你快速精准,。就跟高德地图精确的定位系统一样，

参与评论您还未登录，请先登录后发表或查看评论

css3 transform对其他样式影响,(尤其是position:flixed)

小结巴巴的博客

09-04

749

 1、transform 会为当前元素添加 position ： relative 特性； 当 magin 为负值的时候，就会覆盖到前面的元素， 然而如果给前面元素添加了transform 属性后，前面的元素就会在上面  2、transform 会限制 position：flxed  当一个元素有 posti...

CSS中transform对fixed定位的影响-父级加上了transform属性之后就会影响子级的固定定位

学习记录总结分享

02-03

2099

我们知道，设置了position: fixed固定定位属性的元素会脱离文档流，达到“超然脱俗”的境界。也就是说此时给这种元素设置top, left, right, bottom等属性是根据浏览器窗口定位的，与其上级元素的位置无关。

transform影响position: fixed的解决方法

ferwagrea的博客

03-29

2025

在transform不为none的元素中，定位是会受到影响的。

transform 遇上 position: fixed

weixin_34358092的博客

06-16

590

最近遇到一个有意思的现象，以下 demo 中 fixed 的元素没有相对 viewport 定位，而是相对于它的父元素进行定位。 <html> 　　<head> 　　<style> 　　　　.parent { 　　　　　　width: 200px; 　　　　　　height: 300px; 　　　　　　background: yellow; ...

fixed定位失效，transform影响普通元素

技术前端，忠于热爱 @回忆哆啦没有A梦

04-18

1531

fixed定位失效，transform影响普通元素;CSS3 transform对普通元素的N多渲染影响

CSS综合案例3，利用定位完成谷歌搜索框

最新发布

02-04

定位主要包括静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。静态定位是默认的定位方式，元素按照正常的文档流排列。相对定位则允许元素相对于其原本在文档流中的位置进行...

前端面试-CSS

wanglu458512的博客

09-19

2978

一、CSS基础 CSS选择器及其优先级对于选择器的优先级：标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高；如果优先级相同，则最后出现的样式生效；继承得到的样式的优先级最低；通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用

CSS动画效果2

bear_huangzhen的专栏

10-01

633

示例1（嫦娥奔月）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>嫦娥奔月</title> <style type="text/css"> body{ background-color: #000; ...

当 position:fixed 遇上 transform

MaRain

09-18

1169

前言任务是 iscroll.js 做滑动效果，需要滑动到一定位置的时候滑动里面的元素停留在窗口的最顶端，我想的是检测一下当到位置是把元素设置成 position:fixed 就可以了。但是事实是并没有，设置了属性还是照样可以滑动，这让我很费解。原因iscroll.js 在外层的div 上设置了 transform ,而这个元素影响了 position:fixed 让他只

position：fixed 失效

lunmeifan的博客

04-12

1323

position :fixed 失效的问题，多半是因为父元素设置了transform 属性，使父元素在进行transform的过程中，形成一个浮层，所以看似页面在滚动或是发生变化，实际上页面并没有滚动。解决方案一、将父元素的transform属性去掉。（这应该是不可能的。）解决方案二、将对于设置fixed属性的元素脱离出带有transform属性的父元素 ...

position:fixed 失效的解决方法

简析的博客

04-11

8129

今天同事问如何固定div到某个位置，不随滚动条滚动。我一听简单，用position:fixed就行了啊。我记得position:fixed的元素相对于屏幕视口的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。结果并没有起作用，还是跟着滚动。怎么办？查！原来，在某些情况下，position:fixed会失效：当元素祖先的 transform 属性非 none ...

transform导致溢出_transform与position:fixed的那些恩怨

weixin_36401802的博客

02-22

655

1. 前言在写这篇文章之前，我理解的fixed元素是这样的：(摘自CSS布局基础)固定定位与absolute定位类型类似，但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与backgroun...

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

x1a0x0的博客

01-20

798

暂时解决办法动态取消样式而后从新赋值； var domentClasscu =document.body.className ; document.body.className = ''; 执行动态效果完成后 document.body.className = domentClasscu; 有更好的方法的大牛，求留言 ...

transform限制position:fixed的跟随效果

qq_36904182的博客

10-12

866

我们应该都知道，position:fixed可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了。但是，真是一物降一物，position:fixed固定效果却被小小的transform给干掉了，直接降级变成position:absolute的蛋疼表现。例如下面示意代码： <p style="transform:scale(1);"><img src="mm1.jpg"style="position:fixed;"

css3的transform属性会限制position:fixed的跟随效果，导致fixed定位失效

song527002517的博客

07-31

1354

position:fixed是相对于浏览器窗口生成的固定定位，可以让元素不跟随浏览器的滚动条而滚动。但是当父元素的css加了个transform属性值，原本应该固定在窗口上的fixed元素就会失效，变成跟着滚动条滚动了。 ...

css3中的tansform 属性对position:absolute的影响

业余前端的职业经历

03-13

571

在做一个图片旋转的demo的时候发现了父类元素添加tansform 对子类定位的影响当给一个元素加上transform属性的时候，这个元素就会具有relative的特性,所以若一个元素的父元素拥有tranform属性，那么子元素在使用定位属性的时候要注意 ...

前端总结100点-2-transform

weixin_42863883的博客

06-02

117

transform 学习资源 https://www.runoob.com/cssref/css3-pr-transform.html https://c.runoob.com/codedemo/3391 不自己敲敲，还是不靠谱 // 语法 transform:none|transform-funcitons;(none) 值描述 none 定义不进行转换 matrix(n,n,n,n,n,n) 定义2D转换，使用6个值的矩阵 matrix3d(n,n,n,n,n,n,n,n,n

iphone11 手机中position:fixed 定位在底部的元素随滚动条滚动，fixed定位失效

06-09

在 iOS 中，当一个元素被设置为 `position: fixed` 并且该元素的父元素同时具有 `transform`、`perspective` 或 `filter` 属性时，该元素将不再保持固定位置。这个问题可能会导致 `position: fixed` 的元素在 iPhone 和 iPad 上无法正常工作。解决方法是，将 `position: fixed` 的元素直接放置在 `body` 元素中，而不是放置在任何其他元素内。这样可以避免父元素的 `transform`、`perspective` 或 `filter` 属性对 `position: fixed` 元素的影响。如果您必须在元素内使用 `transform`、`perspective` 或 `filter` 属性，可以考虑使用 `position: absolute` 或 `position: sticky` 来代替 `position: fixed`。这两种属性不受这个问题的影响。另外，还需要注意在 iOS 设备上，滚动事件的触发机制与桌面浏览器有所不同。在移动设备上，滚动事件会在滚动停止后一段时间才被触发，而不是像桌面浏览器那样在滚动时持续触发。这可能会导致某些情况下 `position: fixed` 的元素出现闪烁的问题。您可以通过监听 `scroll` 事件并使用 `requestAnimationFrame` 来解决这个问题。