程序員應該都知道position的用法,Position 可能取的值有 absolute、fixed、relative、static和inherit。
position屬性規(guī)定元素的定位類型。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成一個塊級框,而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。
當值為 absolute 時:生成絕對定位的元素,相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
當值為 fixed時:生成絕對定位的元素,相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
當值為 relative時:生成相對定位的元素,相對于其正常位置進行定位。因此,"left:20" 會向元素的 LEFT 位置添加 20 像素。
當值為 static時:默認值。沒有定位,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。
當值為 inherit時:規(guī)定應該從父元素繼承 position 屬性的值。
然而最近我在做一個一屏式的前端項目的時候發(fā)現(xiàn)position:fixed 這個屬性失效了,或者說它的屬性所表現(xiàn)出來的效果相當于position:absolute,一開始我以為是有什么同名類名的樣式影響到了,然而審查元素發(fā)現(xiàn)不是這個原因,隨后我請教了一下前輩,前輩說可能是它的父級有什么樣式影響到了這個屬性,在我認為position:fixed這個屬性是很絕對的,就像上面所說的當值為 fixed時:生成絕對定位的元素,相對于瀏覽器窗口進行定位。既然是相對于瀏覽器窗口定位,那應該沒什么屬性能影響到吧,而且在平時的項目應用中也確實發(fā)現(xiàn)這個屬性很具有獨立性,不受其他屬性影響,但是在這個項目中卻沒有表現(xiàn)出它應有的效果,這是為什么呢?
經過多方排查,原來是因為做這個一屏式的前端頁面的時候用的fullpage.js 會給最外圍的div 添加一個 transform: translate3d(0px, 0px, 0px); 屬性,而正是這個屬性導致了position:fixed 的屬性失效了,從而表現(xiàn)出了position:absolute的效果。
當然,有人會說那應該沒關系吧,反正在一屏式的頁面中,定的位置是一樣的,沒什么區(qū)別啊,在正常的一屏式頁面中確實沒什么差別,一屏式頁面本身就是瀏覽器窗口的大小,在這個區(qū)域內position:fixed和position:absolute這兩個屬性其實沒什么區(qū)別吧。然而我這里做的是一屏式的響應式,而且在移動端的時候要取消一屏式的效果,讓每一屏的頁面內容不再局限在一屏的范圍內,需要可以調控內容區(qū)域的高度(這里我之前也有寫過),在這樣的前提下,上訴的問題就出來了,我定位在當前區(qū)域的position:fixed不再根據瀏覽器窗口定位了,而是根據body來定位了,也就得不到我想要的效果了,排查出是transform: translate3d這個屬性影響的,當我通過css強制更改這個屬性的值為默認值的時候,position:fixed表現(xiàn)出了它應有的效果,由此我得出了position:fixed在父級有使用transform: translate3d屬性的時候會失效的結論,至于是否還有其他屬性影響到position:fixed的效果,那就需要在實踐中去體驗了。
本文標題:論前端制作中position:fixed屬性的有效范圍
分享URL:http://m.newbst.com/news2/240202.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供Google、搜索引擎優(yōu)化、網站設計、服務器托管、品牌網站制作、標簽優(yōu)化
廣告
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創(chuàng)新互聯(lián)