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

最新推荐文章于 2025-12-25 17:20:30 发布
原创 最新推荐文章于 2025-12-25 17:20:30 发布 · 2.1k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
css

当前文章被收录于：

css
9 篇文章 0 人学习
订阅专栏 查看详情
本文探讨了Mint-UI的loadmore组件在使用transform样式时，如何影响position:fixed元素的定位，并提供了相关资源链接进行深入研究。
标签
#transform #fixed失效
记录vue中使用了transition后使用fixed引起的Bug
前端李小白的博客
07-31 2041
最近在项目的layout页面中使用了transition组件，接着页面里面某些使用fixed定位的元素就出现了问题，如图 底部导航这个元素一开始会从底部弹起 造成这样的原因可能是由于使用了fixed定位引起的，而且上面部分用了calc(100% -底部的高度) 接下就这样解决了 底部改成不用定位，滚动的地方使用calc(100vh -底部的高度)，再设置滚动，这样就解决了底部弹起的bug .r-image { .container { width: 100%; // height:
fixed 定位失效 与 CSS 层叠上下文
祝小余不定时更新
01-02 3267
第一部分，position: fixed失效的问题； 第二部分，了解一下由此扯出的一个Stacking Context层叠上下文。 文中大部分内容来自于我对W3C文档及一些英文资料的理解，如有不明确或表述不准确的地方还请指出。 fixed 定位与 CSS 层叠上下文的关系 关于 position: fixed position: fixed 在日常布局中比较常用，如移动端头部和底部导航定
transform影响position: fixed的解决方法
ferwagrea的博客
03-29 2556
在transform不为none的元素中，定位是会受到影响的。
issues: 父级元素包含transform导致fixed定位失效
落枫秋歌
12-11 1962
fixed定位失效， transform影响fixed定位， 包含块
CSS transform 使 fixed 定位失效？
码小余の博客
04-01 5131
CSS transform 使 fixed 定位失效？ 1. 最终实现效果如下 看似简单的一个动画，却出现了种种bug，也不叫bug，毕竟是W3C官方的嘛，整整耗费了我一下午的时间去搞它。 2. 布局样式（关键点） 先来看一下我的布局吧 首先 index_bar_container 是 cl_header 的父元素（坑） 就先看这个父子关系吧，其他的都一样了 <!-- 收藏位置弹窗 start --> <div v-if="show" :class="isShow ? 'in
父节点使用transform，子节点fixed定位失效
随风丶逆风的博客
02-20 1712
在使用第三方sdk时，偶遇一个小问题，遂记录一下。 问题现象 第三方sdk提供了渲染功能和操作按钮，因为业务场景的原因，需要改变这些按钮的样式和位置。 我啪的一下，很快啊。直接f12，鼠标选中dom节点，查看class名字，使用important直接覆盖样式。但是它不讲武德，大小形状颜色都变了，fixed定位咋没生效呢。 于是又啪的一下，打开了styles查看，发现fixed实际已经生效了。遂开始面向谷歌编程。 问题原因 父节点的样式中如果transform属性不为none，就会修改fixed的上文基准位置
绝对定位不准！父元素设置了 transform，子元素的 fixed 定位会失效
有一棵树的博客
10-10 570
在前端开发中，我们常常使用。
解决position：fixed 固定定位失效问题
铁锤妹妹的博客
05-22 1万+
最近在项目开发过程中遇到了一个固定定位失效的问题，当给底部定位元素设置了position： fixed并设置了距离top和left，bottom的距离之后发现位置居然一直不正确，fix固定定位失效了。 百度看了些文章说是父元素如果存在 transform 属性或者移动端设置-webkit-overflow-scrolling属性时会出现同样的问题 我的页面父元素未设置 transform ，就全局搜索了-webkit-overflow-scrolling，发现全局样式里设置了，百度了-webkit-over
解决Fixed布局失效的问题
jocchoc的博客
05-16 5957
解决transform导致的Fixed布局失效的问题 问题描述 当父元素存在css3的transform属性时，会导致子元素的fixed布局失效（其表现像化为absolute布局）。 场景示例 例如在vue-cli项目中，长遇见这种情况。当使用vue-router路由切换效果，导致页面固定在底部的按钮布局失效。路由切换完毕，按钮归位。 解决办法 经过一番折腾，总结最好的解决办法就是。用...
css fixed定位失效问题
m0_47659279的博客
09-03 3027
fixed定位失效问题的原因多半在于fixed定位的元素其祖先的transform, perspective 或 filter属性非none，导致fixed定位不再参照视口进行定位，而是参照祖先进行定位。
transform父元素对fixed子元素的影响
Jayant89的博客
11-20 1966
在应用了属性transform的父元素上，若其拥有fixed属性的子元素，则该子元素的fixed属性讲失效，并将以其父元素为定位基准 详情请看例子： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style&gt; .outer { over
CSS 之 posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果
weixin_45092437的博客
09-08 1276
推测原因： 我一开始认为是因为父元素设置 `tranform` 属性后，就创建了一个新的BFC（块格式上下文），该元素内部的样式相对独立，所以子元素的`fixed`定位，才会以父元素为参照对象。但是经过实验，其他可以创建BFC的样式却不会导致这种特性，说明还跟`tranform`某些特性有关。 浏览器限制： 经过我的测试，这个特性表现，目前在大部分主流浏览器中存在（Chrome、FireFox、Safari、Edge、猎豹、搜狗、360浏览器）
CSS Transform 导致 position:fixed 失效的排查与解决
最新发布
No_Name_Cao_Ni_Mei的博客
12-25 882
CSS Transform导致position:fixed失效问题的排查与解决。在Nuxt 2项目中，底部导航栏的fixed定位异常，最终发现是响应式缩放插件的transform属性改变了定位上下文。解决方案是使用Portal-Vue将组件DOM传送到body下，脱离transform影响。文章详细介绍了问题现象、排查过程、技术原理（transform创建新包含块）、Portal方案实施步骤，并总结了CSS Transform的副作用、调试技巧和Portal适用场景。这个案例揭示了CSS定位与变换属性的深层
父元素transform，子元素fixed相对body失效
Sigel_的博客
05-11 648
position属性： absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。 static 默认值。没有定位，元素出现在正
position: fixed定位失效原因及解决方案
surui0419的博客
11-28 7854
position: fixed问题分析
解决fixed定位失效问题
用于分享前端相关的知识和架构体系
02-28 505
元素设置fixed失效的原因和解决方案
position:fixed失效的几种情况
weixin_45464787的博客
04-16 4939
在许多情况下，position:fixed 将会失效。MDN 用一句话概括了这种情况： 当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。 What！还有这种操作？可能有部分同学还没 get 到上面这句话的意思，通俗的讲就是指定了 position:fixed 的元素，如果其祖先元素存在非 none 的 transform 值 ，那么该元素将相对于设定了 transform 的祖先元素进行定位。 那么，为什么会发生这种情况呢？说好的相对视口（Viewport）定位呢？ 这个问
关于position:fixed定位的位置不对的问题（即没有按照浏览器的窗口进行定位）
brilliantSt的博客
07-27 2745
关于position:fixed定位的位置不对的问题（即没有按照浏览器的窗口进行定位）
css设置子元素相对于父元素保持位置不变（含有滚动条的父元素）
热门推荐
yzy85的专栏
04-19 2万+
方法一：利用子元素设置position:fixed后由于transform导致的相对视口定位失效bug引起的fixed相对于父级定位； 方法二：利用子元素设置position:absolute后会相对于第一个设置了relative的元素定位来保持位置；
position:fixed失效，根据父类定位
远走的兔子博客
05-22 4601
当父类中用transform属性时，子元素为position:fixed时，子元素不是根据窗体定位，而是根据父元素定位。当前未找到解决方法兼容两个属性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值