加了transform:translateX后position:fixed没效果

最新推荐文章于 2024-04-28 12:52:39 发布

源辰_付

最新推荐文章于 2024-04-28 12:52:39 发布

阅读量6.1k

点赞数 5

分类专栏：前端

本文链接：https://blog.csdn.net/u011724770/article/details/52472899

版权

前端专栏收录该内容

154 篇文章 2 订阅

订阅专栏

今天遇到一个奇葩问题，就是对body加了transform:translateX后，整个页面里面的position:fixed都会失效，令我百思不得其解，上网查阅资料后，发现：

规范中有规定：如果元素的transform值不为none，则该元素会生成包含块和层叠上下文。

最简单的解决方法就是transform元素内部不能有absolute、fixed元素。把需要加动画的地方设置一个div，再进行动画添加，搞定

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

源辰_付

关注关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

ios下使用动画 transform: translate(xx%) 无效问题

Vincentyun

08-06

2722

<div class="wg-marquee-up"></div> .wg-marquee-up { height:300px; -webkit-animation: marquee-up 5s linear infinite; -ms-animation: marquee-up 5s linear infinite; -o-animation: marquee-up 5s linear infinite; animation: marq

transform: translateY(-100%)偏移实现上滑隐藏导航栏

热门推荐

魏少

07-03

2万+

transform:translateY(100%) 语法： Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。语法： transform ： none ; 也就是： tran...

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

transform: translate 不生效 被划线

2301_78723800的博客

03-11

850

若要在开发者工具中查看具体原因，请检查受影响元素的CSS面板，查看被划线的样式旁边是否有任何警告或提示，这有助于找出为什么该样式被忽略或未生效。同时，也可以查看元素的计算样式来确认最终应用的样式集合。检查元素的计算样式（Computed Styles）确认是否有其他样式导致了translate无效。： CSS 规则中，多个相同的属性声明只会采用最后一个。在您的例子中，有三个。属性在CSS中用于改变元素的位置而不影响布局流，如果在您的项目中发现。声明，实际上只有最后一个会被应用，即。

vue项目css设置position: fixed无效

僵小蛋的博客

11-03

9809

想要屏幕滚动到广告位置，固定，设置了fixed定位，然而却不生效，以前没有出现过这样的情况，百度一查，，，原来我在路由出口的div设置了动画，用到了transform属性，导致position: fixed失效，，将transform去掉之后，就可以了。总结：遇到position: fixed失效情况，不妨检查一下，祖先元素是否设置了transform，将其去掉就可以了。 ...

transform导致的fixed固定定位失效

cici_bigchild的博客

10-10

781

项目里需要做一个在容器内全屏的功能，screenfull不满足，他只能浏览器全屏（可能是我不会用，求大神指导）。在transform不为none的元素中，定位是会受到影响的。1、父元素及其祖先元素如果使用了transform，则使用fixed定位将会失效，某些效果的实现可以使用sticky来代替。2、同样在被影响的元素上做transform。（试了有用，但是这个位置的计算我把控不了，不适用我的项目）3、最后决定剑走偏锋，在不影响布局的情况下，可以直接把要定位的元素移动到body下。

transform下fixed定位失效

seori的博客

12-30

1436

transform下fixed定位失效以及定位回顾

from{ transform: translateX(0); } to{ transform: translateX(-6000px); } 帮忙改成向左移动的距离是内容的长度，内容长度不是固定的值，谢谢

06-14

但是，在使用 `translateX(-100%)` 时，需要将元素设置为 `position: absolute` 或 `position: fixed`，并且父元素也需要设置 `position: relative`，这样元素的水平方向位置才会相对于父元素进行定位。如果你希望...

.right{ background: url(~@/assets/dataJudged/bgc/anjian_bg@2x.png) no-repeat; background-size: 100% 100%; height: calc(100vh - 173px); overflow-x: auto; padding: 96px 44px 20px 31px; position: relative; .remCase{ /* position: fixed; */ /* top: 11%; right: 8.9%; width: 211px; height: 21px; */ position: absolute; top: 12px; left: 33%; transform: translateX(-50%);通过这个固定到我需要的位置上了，但是我一上下滚动他就脱离背景了

06-10

如果你的父元素也是 `position: absolute` 或 `position: fixed`，则可能会导致定位出现问题。你可以尝试将父元素的 `position` 属性设置为 `relative`，这样子元素的定位就会相对于父元素进行。另外，你可以使用 ...

position: fixed;左右居中

12-28

position: fixed; 左右居中的方法如下： ...这个方法使用了`left: 50%`将元素的左边界定位在父元素的中间位置，然后使用`transform: translateX(-50%)`将元素向左平移自身宽度的一半，从而实现左右居中的效果。

CSS动画效果2

bear_huangzhen的专栏

10-01

635

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

Unity transform.position直接赋值不生效

qq_40161413的博客

05-29

948

因为Character Controller组件的问题，导致对position的直接修改无效，只需要在赋值前禁用该组件即可。但transform.rotation是生效的。

unity中修改transfrom中position失效的问题

最新发布

weixin_44001501的博客

04-28

1299

是一个只读属性，它返回的是一个Vector3类型的值，而不是一个可直接修改的变量。物体的坐标是一个整体，当需要给定新坐标时，需要给定一个Vector3（2）类型的值，例如下方的两种方式。只修改一个物体坐标的一个方向的值，例如：a坐标为（x，y，z），现在需要修改为（-x，y，z）。存在一个父物体a，一个子物体b，ab各有自己的脚本。子物体b坐标通过父物体坐标的动画设置为（x，0，0）通过下述代码无法将c修改为（-x，y，z），程序运行后，根据需要动画需要修改b坐标为（-x，0，0）。

父节点使用transform，子节点fixed定位失效

随风丶逆风的博客

02-20

1451

在使用第三方sdk时，偶遇一个小问题，遂记录一下。问题现象第三方sdk提供了渲染功能和操作按钮，因为业务场景的原因，需要改变这些按钮的样式和位置。我啪的一下，很快啊。直接f12，鼠标选中dom节点，查看class名字，使用important直接覆盖样式。但是它不讲武德，大小形状颜色都变了，fixed定位咋没生效呢。于是又啪的一下，打开了styles查看，发现fixed实际已经生效了。遂开始面向谷歌编程。问题原因父节点的样式中如果transform属性不为none，就会修改fixed的上文基准位置

Vue3中动态组件使用transform标签和Transiton 过渡动画失效的问题

fhfjfkfff的博客

08-12

3976

在使用vue3-element-admin框架中，发现菜单过渡动画失效了，刚开始以为是框架的问题，后来拉取vue3脚手架发现transform标签动画都不可以使用，解决问题后又发现v-enter-active失效，本文章提供了详细的解决方案。...

父元素有transform样式则子元素fixed定位失效

zhaohanqq的博客

05-16

1993

项目中使用的下拉刷新是mint-ui的loadmore组件，该组件下拉时用的transform样式，导致fiexd定位失效了，原因只要position:fixed;元素的父元素有transform样式，那么这个元素的fixed定位就会失效；无论是transform:translate()，scale()还是rotate(). http://www.zhangxinxu.com/wordpress...

固定定位失效问题（position：fixed;固定定位）

ddx2019的博客

03-21

2624

PC端项目：父级设置了transform: translate(0, 0);后，子级的固定定位会失效：（解决办法，去除父级的transform: translate(0, 0); 即可） html: <div class="guding"> <div class="fixed-box"></div> </div> CSS代码...

issues: 父级元素包含transform导致fixed定位失效

落枫秋歌

12-11

1692

fixed定位失效， transform影响fixed定位，包含块

Transition内置组件设置无效的原因

stay hungry, stay foolish

02-02

740

包裹的组件是否有显示隐藏状态的切换，或者是绑定的key值是否发生改变。要放在发生变化的组件外层，如果中间有其他元素或组件会不生效

fixed固定定位transofrm失效的解决

m0_74359467的博客

04-11

490

将 content 元素设置为绝对定位，并将其四个边距都设为 0，以使其占据整个父容器的空间。然后，我们在该元素内部再创建一个 div 元素，并将其设置为绝对定位，同时使用 translate 属性将其水平和垂直居中。将 content 元素设置为绝对定位，同时使用 flexbox 布局将其内部的元素水平和垂直居中。具体来说，我们将该元素的 display 属性设为 flex，然后使用 align-items 属性将其垂直居中，使用 justify-content 属性将其水平居中。