论前端制作中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属性的有效范围
当前网址:https://www.cdcxhl.com/news/240202.html

成都网站建设公司_创新互联,为您提供企业建站网站设计手机网站建设网站建设面包屑导航小程序开发

广告

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

网站建设网站维护公司