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

2023-02-27    分类： 网站建设

前端制作
程序员应该都知道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和position:absolute这两个属性其实没什么区别吧。然而我这里做的是一屏式的响应式，而且在移动端的时候要取消一屏式的效果，让每一屏的页面内容不再局限在一屏的范围内，需要可以调控内容区域的高度（这里我之前也有写过），在这样的前提下，上诉的问题就出来了，我定位在当前区域的position:fixed不再根据浏览器窗口定位了，而是根据body来定位了，也就得不到我想要的效果了，排查出是transform: translate3d这个属性影响的，当我通过css强制更改这个属性的值为默认值的时候，position:fixed表现出了它应有的效果，由此我得出了position:fixed在父级有使用transform: translate3d属性的时候会失效的结论，至于是否还有其他属性影响到position:fixed的效果，那就需要在实践中去体验了。

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

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

广告

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

猜你还喜欢下面的内容

成都网页设计公司

网站建设知识

同城分类信息