论前端制作中position:fixed属性的有效范围

程序员应该都知道position的用法，Position 可能取的值有 absolute、fixed、relative、static和inherit。
position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
当值为 absolute 时：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
当值为 fixed时：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
当值为 relative时：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
当值为 static时：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
当值为 inherit时：规定应该从父元素继承 position 属性的值。
然而最近我在做一个一屏式的前端项目的时候发现position:fixed 这个属性失效了，或者说它的属性所表现出来的效果相当于position:absolute，一开始我以为是有什么同名类名的样式影响到了，然而审查元素发现不是这个原因，随后我请教了一下前辈，前辈说可能是它的父级有什么样式影响到了这个属性，在我认为position:fixed这个属性是很绝对的，就像上面所说的当值为 fixed时：生成绝对定位的元素，相对于浏览器窗口进行定位。既然是相对于浏览器窗口定位，那应该没什么属性能影响到吧，而且在平时的项目应用中也确实发现这个属性很具有独立性，不受其他属性影响，但是在这个项目中却没有表现出它应有的效果，这是为什么呢？
经过多方排查，原来是因为做这个一屏式的前端页面的时候用的fullpage.js 会给最外围的div 添加一个 transform: translate3d(0px, 0px, 0px); 属性，而正是这个属性导致了position:fixed 的属性失效了，从而表现出了position:absolute的效果。

本文标题：论前端制作中position:fixed属性的有效范围
分享URL：/news2/240202.html

成都网站建设公司_创新互联，为您提供Google、搜索引擎优化、网站设计、服务器托管、品牌网站制作、标签优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联