css transform影响fixed的问题

最新推荐文章于 2024-07-10 10:04:49 发布
最新推荐文章于 2024-07-10 10:04:49 发布
阅读量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
关注
专栏目录
父节点使用transform，子节点fixed定位失效
随风丶逆风的博客
02-20 1451
在使用第三方sdk时，偶遇一个小问题，遂记录一下。 问题现象 第三方sdk提供了渲染功能和操作按钮，因为业务场景的原因，需要改变这些按钮的样式和位置。 我啪的一下，很快啊。直接f12，鼠标选中dom节点，查看class名字，使用important直接覆盖样式。但是它不讲武德，大小形状颜色都变了，fixed定位咋没生效呢。 于是又啪的一下，打开了styles查看，发现fixed实际已经生效了。遂开始面向谷歌编程。 问题原因 父节点的样式中如果transform属性不为none，就会修改fixed的上文基准位置
CSS 之 posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果
weixin_45092437的博客
09-08 1110
推测原因： 我一开始认为是因为父元素设置 `tranform` 属性后，就创建了一个新的BFC（块格式上下文），该元素内部的样式相对独立，所以子元素的`fixed`定位，才会以父元素为参照对象。但是经过实验，其他可以创建BFC的样式却不会导致这种特性，说明还跟`tranform`某些特性有关。 浏览器限制： 经过我的测试，这个特性表现，目前在大部分主流浏览器中存在（Chrome、FireFox、Safari、Edge、猎豹、搜狗、360浏览器）
CSS【详解】变换 transform（含位移 translate，缩放/翻转 scale，旋转 rotate，CSS 的角度单位，斜切skew，透视 perspective，变换类型和原点等）
最新发布
朝阳39的博客
07-10 1262
变换是缩放、位移、旋转、透视、斜切等的总称。
css fixed定位被transform影响的问题
elizebeth6的博客
01-12 481
css fixed 被transform影响
CSS中transform对fixed定位的影响-父级加上了transform属性之后就会影响子级的固定定位
学习 记录 总结 分享
02-03 2106
我们知道，设置了position: fixed固定定位属性的元素会脱离文档流，达到“超然脱俗”的境界。也就是说此时给这种元素设置top, left, right, bottom等属性是根据浏览器窗口定位的，与其上级元素的位置无关。
transform(转换)
无糖加冰
01-08 3117
CSS3中的transform(转换) transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,变形,缩放等效果. 浏览器支持情况 Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。 Opera 只支持 2D 转
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实现div在窗口上下左右居中
09-25
这时，需要利用CSS中的margin属性或transform属性来实现居中。 首先，让元素垂直居中，可以通过设置top属性为50%，然后通过margin-top的负值来调整。负值的计算方式为负的一半元素的高度，这样元素的中心就会与...
前端面试-CSS
wanglu458512的博客
09-19 2987
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
transform影响position: fixed的解决方法
ferwagrea的博客
03-29 2037
在transform不为none的元素中，定位是会受到影响的。
transform对fixed的影响
CodingNoob
12-23 2342
最近做项目遇到一个问题，就是为元素设置fixed属性之后发现元素竟然不是相对于窗口定位，纠结了很久，才发现原来是父元素设置了transform属性导致元素相对于父元素定位，fixed不相对窗口定位了。 代码如下： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
【css】关于transform的fixed定位失效问题
热门推荐
汪小穆的博客
05-04 1万+
前言：发现一个很有趣的关于transform的bug。 一、问题起始： ①、要弄一个侧边展开栏，我是直接给body添加一个transform:translateX(80%);的样式，让body整体往左移了80%的距离 ②、然后点击侧边展开栏再给body添加一个transform:translateX(0);的样式，让他回到原来位置。 ③、整体的效果实现并没有问题。 ④、但是fixed定位...
position:fixed 降级为absolute的问题
qq_44741577的博客
04-15 378
本篇文章汇总一下position:fixed 降级为absolute的情况。
css样式 position: fixed 失效，和 position: absolute 效果一样
学敲代码的Stars的博客
05-18 222
祖先元素使用了 "transform"导致。将需要绝对定位的元素直接挂载在body下，使用vue3新特性teleport。
css 常用操作
Bonrui编程路
01-12 4892
transform限制position:fixed的跟随效果 元素设置position:fixed后大家都知道可以让元素不跟随滚动条滚动， 但是transform可以把position:fixed干掉让其降级成absolute。 如下面代码： 本身应该不动的图片因为父级设置了transform而变成了absolute的效果。 更多transform影响css的介绍请参考：
css 的 transform:scale(-1,1) 使得fixed定位失效（fixed会降级为absolute）问题
qq_40101922的博客
10-19 5172
最近写一个阿拉伯国家的web，因为阿拉伯语言的阅读习惯是从右到左，而且本来就有做好了的英语版本的web，为了快速开发，就把英语版本的web复制一份出来，在调整一下css样式就好了，如下： 在HTML根元素加上css： body{ transform:scale(-1,1)； } //这样，整个web布局就会反过来。 但是，HTML内的文字也反过来了，所以这时，就可以在对应包裹文字的元素再把...
解决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、付费专栏及课程。

余额充值