css transform影响fixed的问题

最新推荐文章于 2024-05-18 18:16:34 发布
最新推荐文章于 2024-05-18 18:16:34 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27449993/article/details/89228843
版权

position:fixed可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了。但是，真是一物降一物，position:fixed固定效果却被小小的transform给干掉了，直接降级变成position:absolute

https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/

qq_27449993
关注
专栏目录
[CSS入门到进阶] 用transform后z-index失效了？总结transform的注意事项！
Hull Qin
08-21 3229
前端开发者一定要知道的transform的知识！如果你不了解这些，就去使用transform这个css，很可能就踩坑了！快来学习一下吧！
父节点使用transform，子节点fixed定位失效
随风丶逆风的博客
02-20 1466
在使用第三方sdk时，偶遇一个小问题，遂记录一下。 问题现象 第三方sdk提供了渲染功能和操作按钮，因为业务场景的原因，需要改变这些按钮的样式和位置。 我啪的一下，很快啊。直接f12，鼠标选中dom节点，查看class名字，使用important直接覆盖样式。但是它不讲武德，大小形状颜色都变了，fixed定位咋没生效呢。 于是又啪的一下，打开了styles查看，发现fixed实际已经生效了。遂开始面向谷歌编程。 问题原因 父节点的样式中如果transform属性不为none，就会修改fixed的上文基准位置
CSS 之 posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果
weixin_45092437的博客
09-08 1131
推测原因： 我一开始认为是因为父元素设置 `tranform` 属性后，就创建了一个新的BFC（块格式上下文），该元素内部的样式相对独立，所以子元素的`fixed`定位，才会以父元素为参照对象。但是经过实验，其他可以创建BFC的样式却不会导致这种特性，说明还跟`tranform`某些特性有关。 浏览器限制： 经过我的测试，这个特性表现，目前在大部分主流浏览器中存在（Chrome、FireFox、Safari、Edge、猎豹、搜狗、360浏览器）
css fixed定位被transform影响的问题
elizebeth6的博客
01-12 496
css fixed 被transform影响
CSS中transform对fixed定位的影响-父级加上了transform属性之后就会影响子级的固定定位
学习 记录 总结 分享
02-03 2146
我们知道，设置了position: fixed固定定位属性的元素会脱离文档流，达到“超然脱俗”的境界。也就是说此时给这种元素设置top, left, right, bottom等属性是根据浏览器窗口定位的，与其上级元素的位置无关。
【css】关于transform的fixed定位失效问题
热门推荐
汪小穆的博客
05-04 1万+
前言：发现一个很有趣的关于transform的bug。 一、问题起始： ①、要弄一个侧边展开栏，我是直接给body添加一个transform:translateX(80%);的样式，让body整体往左移了80%的距离 ②、然后点击侧边展开栏再给body添加一个transform:translateX(0);的样式，让他回到原来位置。 ③、整体的效果实现并没有问题。 ④、但是fixed定位...
css3 position fixed固定居中问题解决方案
09-25
然而，当尝试将一个`position: fixed`的元素居中时，常规的居中对齐方法如 `margin: 0 auto` 可能不再有效，因为`fixed`定位使元素脱离了正常文档流，不再受到父元素的影响。 通常，我们使用 `margin: 0 auto` 来...
css3 transform导致子元素固定定位变成绝对定位的方法
11-21
本文介绍了css3 transform导致子元素固定定位变成绝对定位的方法，分享给大家，也给我自己留个笔记，方便查找。 <!DOCTYPE html> <html> <head> <style> body { background: #f60; // 橙色 ...
css3的transform造成z-index无效解决方案
09-25
在CSS3中，`transform`属性是一个非常强大的工具，它允许我们对元素进行旋转、缩放...在进行复杂的CSS布局设计时，应尽量减少对`transform`的依赖，或者在使用时充分考虑它对堆叠顺序的影响，从而避免类似的问题出现。
详解css3使用transform出现字体模糊的解决办法
01-18
这个问题很奇葩，话不多少直接上代码： .g-dialog-wrapper { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: 405px; ...
css样式 position: fixed 失效，和 position: absolute 效果一样
最新发布
学敲代码的Stars的博客
05-18 276
祖先元素使用了 "transform"导致。将需要绝对定位的元素直接挂载在body下，使用vue3新特性teleport。
css 常用操作
Bonrui编程路
01-12 4964
transform限制position:fixed的跟随效果 元素设置position:fixed后大家都知道可以让元素不跟随滚动条滚动， 但是transform可以把position:fixed干掉让其降级成absolute。 如下面代码： 本身应该不动的图片因为父级设置了transform而变成了absolute的效果。 更多transform影响css的介绍请参考：
解决input position：fixed 问题
qq_40101922的博客
07-09 1890
  $(".big_input").on("click",function(){ var target=this; setTimeout(function(){ target.scrollIntoView(true); },100) })   //调用方法为 element.scrollIntoView() 参数默认为true。 //参数为true时调用该函数，页面（或容器）发生...
fixed固定定位transofrm失效的解决
m0_74359467的博客
04-11 524
将 content 元素设置为绝对定位，并将其四个边距都设为 0，以使其占据整个父容器的空间。然后，我们在该元素内部再创建一个 div 元素，并将其设置为绝对定位，同时使用 translate 属性将其水平和垂直居中。将 content 元素设置为绝对定位，同时使用 flexbox 布局将其内部的元素水平和垂直居中。具体来说，我们将该元素的 display 属性设为 flex，然后使用 align-items 属性将其垂直居中，使用 justify-content 属性将其水平居中。
css定位属性position:fixed
wangooo的博客
01-02 4540
Absolute定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。Fixed定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。Fixed和Absolute都是CSS中定位的属性，它们用于控制元素在页面中的位置，其中Fixed表示固定定位，Absolute表示绝对定位。Absolute定位的常用场景是实现页面中的局部定位，例如可以实现图片的悬浮效果、文字的重叠等。
CSS布局（定位、浮动）
li17835756262的博客
09-18 1110
（2）父元素宽度如果不够， 例如不能放下一个子元素4， 那么子元素4在贴边时， 会跳过上一个子元素3， 向更上一个子元素2进行贴边， 如果子元素2后面位置不够， 继续跳过子元素2向前面的子元素1进行贴边。（3）如果子元素4在跳过子元素3向更前面的子元素2贴边时， 子元素2的高度不高于子元素3， 子元素2没有延伸出一个高度的边让子元素4贴边， 那么子元素4就会跳过子元素2向子元素1进行贴边。性质： 固定定位的元素脱离标准流， 让出标准流位置， 可以设置宽高， 根据偏移量属性可以任意设置在浏览器窗口的位置。
前端学习（38）：css颜色小练习
歌谣的博客
12-07 375
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
css-transform对position:fixed影响
雄的博客
04-16 1522
在betterScroll尝试使用position:fixed固定首列，然而并不能实现固定。因为 bscroll / iscroll 是基于 transform 属性实现滚动的, 所以 iscroll 会通过实时修改元素的 transform 属性以达到滚动的效果。父元素如果存在 transform 属性，子元素的 position: fixed 属性无效 参考资料 ...
fixed定位怎么失效了（transform对fixed定位的影响）
03-02 1048
项目中突然发现fiexd定位失效了，会跟着屏幕上下滑动了，检查了一下发现了原因 <div style='transform:translate3d(0,0,0)'> <div style='position:fixed;top:0;left:0;'></div> </div> 原因： 　　只要position:fi...
解决CSS position:fixed 兼容问题
05-31
CSS中的position:fixed属性用于将元素固定在浏览器窗口的某个位置，无论滚动条如何滚动，该元素都会保持不变。但是，该属性在不同的浏览器中有不同的兼容性问题，下面介绍几种解决方法。 1. IE6兼容问题 IE6不支持...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值