程序員應該都知道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)出它應有的效果，這是為什么呢？
經(jīng)過多方排查，原來是因為做這個一屏式的前端頁面的時候用的fullpage.js 會給最外圍的div 添加一個 transform: translate3d(0px, 0px, 0px); 屬性，而正是這個屬性導致了position:fixed 的屬性失效了，從而表現(xiàn)出了position:absolute的效果。

本文標題：論前端制作中position:fixed屬性的有效范圍
分享URL：http://www.rwnh.cn/news2/240202.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、搜索引擎優(yōu)化、網(wǎng)站設計、服務器托管、品牌網(wǎng)站制作、標簽優(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)