fixed失效

最新推荐文章于 2026-06-04 13:48:38 发布
原创 最新推荐文章于 2026-06-04 13:48:38 发布 · 575 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
CSS

当前文章被收录于：

CSS
8 篇文章 0 人学习
订阅专栏 查看详情
本文探讨了在CSS3动画中使用perspective和transform属性时，导致fixed元素定位失效的问题。详细介绍了问题的原因及解决方案，建议将perspective和transform属性应用到特定元素的父级，以避免定位错误。

1.  perspective

    在项目中，写css3动画的时候，用到了perspective，由于某种原因，perspective设置到了body上面，然后导致了fixed的元素定位失效变为absolute。一开始还不知道问题所在，后来各种回滚才发现，虽然也不知道是什么原因。解决办法：给需要3D旋转的元素加一个父级元素，然后给父级元素设置perspective属性。

2.  transform

    父元素或更外层元素使用transform，该元素fixed定位失效，变为absolute。

标签
#css3 #perspective #fixed #position
父元素中有transform, perspective 或 filter时，fixed子元素如何呈现
qq_42683219的博客
12-06 1009
前几天做项目的时候，因为对position：fixed属性有认识不全面，然后就导致做弹出层的时候弹出层不能覆盖整个浏览器可视窗口 。 之前认为设置fixed的元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。 但fixed解释还有一部分就是，当元素祖先的 transform, perspective 或 filter 属性非 none
CSS之定位布局（position，relative定位布局技巧）
梁同学与Android
11-13 1万+
1.什么是定位： css中的position属性，position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局，使用TLBR(top,left,bottom,right)来调整元素位置。 2.各个属性值的描述： *static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分...
关于position:fixed定位的位置不对的问题（即没有按照浏览器的窗口进行定位）
brilliantSt的博客
07-27 2745
关于position:fixed定位的位置不对的问题（即没有按照浏览器的窗口进行定位）
css3的perspective或者transform:tanslateZ没有效果
spadescy的博客
02-22 1663
css3的perspective或transform:tanslateZ没有效果
CSS3--perspective属性
u012038144的专栏
09-02 1万+
CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持，IE10支持。 只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单： 只能选择透视方式，也就是近大远小的显示方式。镜头方向只能是平行Z轴向屏幕内，也就是从屏幕正前方向里看。可以调整镜头与平面位置： a) perspective属性
DreamMail无法打开邮件数据库问题的解决办法
热门推荐
汪涛的专栏
04-10 1万+
DreamMail无法打开邮件数据库问题的解决办法 （http://blog.csdn.net/kingspider/）DreamMail（http://www.dreammail.org/）是一个很好用的国产Email客户端，使用方便，界面漂亮，而且更新的速度也很快。目前在使用中遇到无法打开数据库的问题，就是无法打开“DreamMail4/User/DefaultUser/DmData.
2004-06-29
07-21 443
---------------------------08:54昨天添加了第一段代码。今天先开始后面的添加，争取今 天搭出来个样子。10：34在输入代码的过程中，发现第一速度太慢了。第二里面涉 及的知识还是不明白。第三手工输入时脑子里是空白的。还是先 改一段代码再说。10：53在数据库这一块卡壳了。想着如果有一个很小的access数 据库，用很小的程序一个个的试验说不定会效果好得多。11：26遇到
Protel 99 SE .ddb文件损坏修复指南：从原理到实战
最新发布
weixin_30561177的博客
06-04 437
在电子设计自动化（EDA）领域，设计文件是工程师的核心资产。Protel 99 SE等工具采用.ddb（设计数据库）格式来集中管理项目文件，其底层基于微软Access数据库结构。这种集成化管理方式虽然便捷，但也带来了单点故障风险——一旦数据库索引或表头信息因软件异常退出、磁盘错误等原因发生损坏，整个项目便可能无法访问，造成巨大损失。其修复原理在于尝试重建文件内部索引结构，而非恢复物理损坏的数据。对于涉及MCU/嵌入式系统、FPGA/CPLD配置等复杂电路设计而言，掌握有效的文件修复与恢复技术具有极高的工程实
IIS自动停止，iis自动关闭。应用程序池假死、自动重启以及iis权限等解决办法 <转>...
weixin_33682719的博客
12-13 882
无故自动关闭停止已经不是罕见的事情了，处理这个问题是让我很头痛的事情，遇到这个问题不太可能一次性解决，多数都是用排除法一个个测试排除错误，最终找到那个错误命令。最近我的服务器遇到了这个问题，我很无奈，我很急，客户也很着急，每天ＩＩＳ都要自动停止２次以上，我总是怀疑是进程池问题，此文章是针对ＩＩＳ进程池解决办法，如果你遇到了死循环代码，或者其他非进程池，那此...
IIS自动停止，iis自动关闭。应用程序池假死、自动重启以及iis权限等解决办法
站在技术的顶端，才能看清脚下的路该通向何方--技术工程师之路！
01-11 1103
IIS无故自动关闭停止已经不是罕见的事情了，处理这个问题是让我很头痛的事情，遇到这个问题不太可能一次性解决，多数都是用排除法一个个测试排除错误，最终找到那个错误命令。最近我的服务器遇到了这个问题，我很无奈，我很急，客户也很着急，每天ＩＩＳ都要自动停止２次以上，我总是怀疑是进程池问题，此文章是针对ＩＩＳ进程池解决办法，如果你遇到了死循环代码，或者其他非进程池，那此文章不太适合你了 网络上有关iis
CSS3-perspective 属性
细心程度决定你的成败
06-30 1772
实例 目前浏览器都不支持 perspective 属性。 Chrome 和 Safari 支持替代的 -webkit-perspective 属性。 div{ -webkit-perspective: 400px; perspective: 400px; } 用法perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
上层一些可以让下层的 fixed 属性无效的属性
11-12 603
 -webkit-perspective: 1000px;     perspective: 1000px;         /*父层 -webkit-perspective可以让下层的 fixed 属性无效*/ 父元素有一个 transform 属性 也可以让下层的 fixed 属性无效*/ 父元素的 -webkit-overflow-scrolling 属性值为 touch，子元素的 po...
解决CSS属性position:fixed不起作用
人间一两风，十万八千梦。
12-06 2361
若父元素设置了transform属性，无论transform设置任何属性值，都会导致position:fixed属性失效！1.当我们在父元素设置了如下css属性时 ： 子元素表现如下： 可见，position:fixed属性失效，顶部导航栏消失。2.当我们移除了父元素中transform相关属性后，子元素表现如下： 可见，position:fixed属性效果恢复，顶部导航栏重新出现。
CSS position: fixed 相对于父元素定位
weixin_48003149的博客
12-10 1万+
使用fixed进行布局的元素，在一般情况下会相对于屏幕视窗来进行定位。但是如果父元素的transform,perspective或filter属性不为none时，position为fixed的元素就会相对于父元素来进行定位。​​​​​​​ 如果父级元素的层级比其兄弟节点低，就算fixed的层级比父级元素及其兄弟元素高，它也会被父级元素的兄弟元素遮挡住。
前端学习（38）：css颜色小练习
歌谣的博客
12-07 649
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
fixed定位失效问题如何解决
qq_43680154的博客
08-26 2439
如何解决fixed定位的问题
position: fixed定位失效原因及解决方案
surui0419的博客
11-28 7855
position: fixed问题分析
解决position：fixed 固定定位失效问题
铁锤妹妹的博客
05-22 1万+
最近在项目开发过程中遇到了一个固定定位失效的问题，当给底部定位元素设置了position： fixed并设置了距离top和left，bottom的距离之后发现位置居然一直不正确，fix固定定位失效了。 百度看了些文章说是父元素如果存在 transform 属性或者移动端设置-webkit-overflow-scrolling属性时会出现同样的问题 我的页面父元素未设置 transform ，就全局搜索了-webkit-overflow-scrolling，发现全局样式里设置了，百度了-webkit-over
移动端踩坑之旅-ios下fixed、软键盘相关问题总结
dianfenze8218的博客
09-11 1338
　　最近一个项目掉进了移动端的大坑，包括ios下fixed布局，h5唤起键盘等问题，作为一个B端程序员，弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome)，还好这次让我学习了一下相关知识。让我们一起来看一下我怎么挣扎出这个大坑的。 　　一、背景 先看一下要做什么，也就是一个文章评论的版块，下面依次有输入框，点赞，收藏等 。大概长下面这个样子： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值