論前端制作中position:fixed屬性的有效范圍

程序員應(yīng)該都知道position的用法，Position 可能取的值有 absolute、fixed、relative、static和inherit。
position屬性規(guī)定元素的定位類型。這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過(guò)絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。
當(dāng)值為 absolute 時(shí)：生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
當(dāng)值為 fixed時(shí)：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
當(dāng)值為 relative時(shí)：生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
當(dāng)值為 static時(shí)：默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
當(dāng)值為 inherit時(shí)：規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
然而最近我在做一個(gè)一屏式的前端項(xiàng)目的時(shí)候發(fā)現(xiàn)position:fixed 這個(gè)屬性失效了，或者說(shuō)它的屬性所表現(xiàn)出來(lái)的效果相當(dāng)于position:absolute，一開(kāi)始我以為是有什么同名類名的樣式影響到了，然而審查元素發(fā)現(xiàn)不是這個(gè)原因，隨后我請(qǐng)教了一下前輩，前輩說(shuō)可能是它的父級(jí)有什么樣式影響到了這個(gè)屬性，在我認(rèn)為position:fixed這個(gè)屬性是很絕對(duì)的，就像上面所說(shuō)的當(dāng)值為 fixed時(shí)：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。既然是相對(duì)于瀏覽器窗口定位，那應(yīng)該沒(méi)什么屬性能影響到吧，而且在平時(shí)的項(xiàng)目應(yīng)用中也確實(shí)發(fā)現(xiàn)這個(gè)屬性很具有獨(dú)立性，不受其他屬性影響，但是在這個(gè)項(xiàng)目中卻沒(méi)有表現(xiàn)出它應(yīng)有的效果，這是為什么呢？
經(jīng)過(guò)多方排查，原來(lái)是因?yàn)樽鲞@個(gè)一屏式的前端頁(yè)面的時(shí)候用的fullpage.js 會(huì)給最外圍的div 添加一個(gè) transform: translate3d(0px, 0px, 0px); 屬性，而正是這個(gè)屬性導(dǎo)致了position:fixed 的屬性失效了，從而表現(xiàn)出了position:absolute的效果。

本文標(biāo)題：論前端制作中position:fixed屬性的有效范圍
分享URL：http://www.bm7419.com/news2/240202.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)、服務(wù)器托管、品牌網(wǎng)站制作、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)