position:fixed 在filter下失效！

最新推荐文章于 2024-08-29 08:36:38 发布
原创 最新推荐文章于 2024-08-29 08:36:38 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#position #fixed #失效

本文探讨了当父元素存在filter属性时，子元素使用position:fixed定位将相对父元素定位的问题。指出若需避免此问题，建议不在根元素使用filter属性，并将fixed元素置于根元素下。

如果父元素中存在filter属性，子元素使用position:fixed 将会相对于父元素定位。

ps: 目前应该解决不了

如果需要强制解决的话！
就不要在根元素中使用filter属性
然后fixed的元素放在根元素下

相关链接：https://github.com/chokcoco/iCSS/issues/24

详解filter与fixed冲突的原因及解决方案
11-21
问题描述 当在 body 中使用了 filter 滤镜属性的时候，会导致 fixed 元素定位发生错误，即不再相对 viewport 进行定位，而是相对整个网页（ body 元素）进行定位。 <html> <head> <title>css filter issue</title> <style> body { height: 600px; background: red; filter: grayscale(1); /* 关键代码 */ } .fixed { color:
解决微信小程序使用css滤镜filter后position fixed错乱
波客
03-22 2817
最近给微信小程序设置灰色页面，给page标签使用滤镜后导致position fixed位置错乱，无法正确定位。 解决方案： 不对page view标签设置filter，只对 text button image video标签设置滤镜，即可解决 button, text, span, video, image { filter: grayscale(1); } ...
backdrop-filter属性导致fixed定位失效
qq_45937484的博客
08-29 1477
backdrop-filter属性导致fixed定位失效
css中filter属性设置后导致页面定位失效
Bright2017的博客
10-12 1131
原因：当在标签中使用了 filter 属性后（body { filter: grayscale(1);）， filter 就会生成一个新的包含块，其位置大小和所在标签一样，然后 fixed 元素就会根据这个包含块进行定位，导致定位出现问题。问题：app上设置css的filter属性导致定位失效。解决方式：设置到html上即可。
css filter属性和position冲突
weixin_51679573的博客
12-01 756
踩坑，CSS3 filter属性与postion属性冲突
iphone11 手机中position:fixed 定位在底部的元素随滚动条滚动，fixed定位失效
06-09
在 iOS 中，当一个元素被设置为 `position: fixed` 并且该元素的父元素同时具有 `transform`、`perspective` 或 `filter` 属性时，该元素将不再保持固定位置。这个问题可能会导致 `position: fixed` 的元素在 iPhone...
position:fixed 底部展示不全
07-17
首先，用户的问题是关于使用CSS的position: fixed时，元素在底部显示不全的问题。他们想要解决方案。 回顾系统指令：我需要使用中文回答，确保LaTeX格式正确（虽然这个问题可能不需要数学表达式），生成相关问题，...
css 中 position:fixed
04-04
例如，在解释fixed失效时，引用[4]提到transform属性会导致问题，解决方案是使用teleport将元素挂载到body下。 此外，要确保代码示例正确，比如居中代码是否正确应用了transform，或者设置left/right为0加上margin ...
position: fixed 切换页面的时候 位置发生变化
最新发布
08-02
此外，移动端浏览器在软键盘弹出时会改变视口高度，导致 `position: fixed` 失效并表现为 `absolute` 定位[^3]。可以通过监听 `resize` 或 `orientationchange` 事件来调整元素位置，或使用 `vh` 单位来保持视口一致...
position:fixed 相对窗口不生效
01-16
如果存在任何使 `position: fixed` 失效的情况，比如祖先元素设置了 `transform`, `perspective` 或者 `filter` 属性且这些属性值不是默认的 `none`，那么受影响的子元素将会依据最近的一个具有此类属性的祖先而非...
css backdrop-filter和border-radius的坑
weixin_45727272的博客
12-29 1381
backdrop-filter是css中毛玻璃效果的属性，但是当他和position：fixed一起使用的时候，会改变css固定定位的相对位置点，固定定位原本是相对于浏览器左上角0,0border-radius和transform-translate使用的时候很离谱，要保证宽高为偶数而且不能为百分比，否则会导致字体渲染模糊
关于filter属性的踩坑记录
m0_47170156的博客
12-30 379
filter属性实现毛玻璃效果 css 一键置灰
追悼日网站自动变为黑白（解决filter导致的absolute和fixed定位问题）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
12-05 1038
追悼日网站自动变为黑白
前端学习（38）：css颜色小练习
歌谣的博客
12-07 518
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
filter对fixed的影响及解决方法
大雾起了清晨
05-17 650
​ 问题现象 我们使用css position: fixed 的时候发现，fixed他竟然不跟随屏幕的进行定位，而是受到含有filter盒子的影响 问题原因 当在元素中使用了filter滤镜属性的时候，会导致内部fixed元素定位发生错误，即不再相对 viewport 进行定位，而是相对整个filter属性的容器元素进行定位。 解决方案 产生这个问题的原因就是：当filter不为none的时候，如果该元素或者其子元素具有absolute或fixed属性
【CSS笔记之六】filter滤镜在IE浏览器失效的原因、Chrome不认document.documentElement.scrollTop的解决方法
热门推荐
freshlover的专栏
05-04 1万+
一、filter滤镜在IE浏览器失效的原因及其解决方法 在项目后期补充交互效果的时候，发现有时候filter滤镜在IE浏览器下会失效。用IE Developer Toolbar检查测试后发现hasLayout 属性值为0。说明造成此现象的原因依然是IE的Layout没有被触发。 触发IE Layout的方式很多，比如display：inline-block;width/height:除
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值