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

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

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

廣告

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