做服务更好的
网站建设公司
当前位置:首页 > 建站资讯 > 网站建设

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

发表日期:2018-06-12 09:10:14作者来源:方维网络浏览次数:286 标签: 网站前端开发    

 程序员应该都知道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的效果,那就需要在实践中去体验了。

作者:方维网络乐文庆
如没特殊注明,文章均为方维网络原创,转载请注明来自http://www.szfangwei.cn/news/4350.html

相关网站设计案例

相关推荐新闻

Web前端移动端导航栏制作...

再说移动端导航栏之前,我们先说说PC端的导航栏,因为在大多数情况...

日期:2018-06-12 浏览次数:21

前端制作快速抠图(切图...

使用photoshop这个软件挺久了,最近才发现原来有一个自己遗漏的小...

日期:2018-06-12 浏览次数:21

网站前端制作之html div高...

高度自适应 网页布局中经常要定义元素的宽和高。但很多时候我...

日期:2018-06-12 浏览次数:31

使用swiper制作视频加图片...

Swiper是一个功能强大的前端工具,可以制作酷炫的轮播图和全屏滚动...

日期:2018-06-12 浏览次数:194

【签约】深圳知言国际传媒...

甲乙学院是一所与众多知识大咖合作的互联网新兴大学。其隶属于...

日期:2018-06-12 浏览次数:174

如何编写自适应网页

现在的上线网站,自适应网站占有了一定比例。作为一个菜鸟前端,这段...

日期:2018-06-12 浏览次数:305

前端制作:非常好用的表单验...

在做网站的过程中,大多数情况下肯定会应用到表单,使用表单让用户输...

日期:2018-06-12 浏览次数:620

如何制作并使用css精灵图/...

一,什么是css精灵图? 引用百度百科的原话,CSS Sprites在国内很多人...

日期:2018-06-12 浏览次数:989

方维前端工程师:如何自学Ja...

JavaScript简称js,在互联网web领域无所不在。如果说div+css可以让...

日期:2018-06-12 浏览次数:488

关于切图(网站前端制作)的...

作为一个小白。在公司实习的这段期间朦朦胧胧地学会了很多很多。...

日期:2018-06-12 浏览次数:625

浅谈咨询行业企业网站建设

浅谈咨询行业企业网站 最近一直在接触咨询行业的网站,同时也在洽...

日期:2018-06-12 浏览次数:341

网建行业,正在悄悄犒赏一直...

中国互联网从1994诞生到现在也有24年了,春来暑往,多少曾经很有知名...

日期:2018-06-12 浏览次数:247

相关标签
网页前端前端设计师前端设计高端网站建设网站前端制作自助建站
网站建设解决方案
搜索引擎优化解决方案大视频短视频网站解决方案教育培训网站解决方案