程序員應(yīng)該都知道position的用法，Position 可能取的值有 absolute、fixed、relative、static和inherit。


 
position屬性規(guī)定元素的定位類型。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。
 
當(dāng)值為 absolute 時：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
 
當(dāng)值為 fixed時：生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
 
當(dāng)值為 relative時：生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
 
當(dāng)值為 static時：默認值。沒有定位，元素出現(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)不是這個原因，隨后我請教了一下前輩，前輩說可能是它的父級有什么樣式影響到了這個屬性，在我認為position:fixed這個屬性是很絕對的，就像上面所說的當(dāng)值為 fixed時：生成絕對定位的元素，相對于瀏覽器窗口進行定位。既然是相對于瀏覽器窗口定位，那應(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的效果。
 
當(dāng)然，有人會說那應(yīng)該沒關(guān)系吧，反正在一屏式的頁面中，定的位置是一樣的，沒什么區(qū)別啊，在正常的一屏式頁面中確實沒什么差別，一屏式頁面本身就是瀏覽器窗口的大小，在這個區(qū)域內(nèi)position:fixed和position:absolute這兩個屬性其實沒什么區(qū)別吧。然而我這里做的是一屏式的響應(yīng)式，而且在移動端的時候要取消一屏式的效果，讓每一屏的頁面內(nèi)容不再局限在一屏的范圍內(nèi)，需要可以調(diào)控內(nèi)容區(qū)域的高度（這里我之前也有寫過），在這樣的前提下，上訴的問題就出來了，我定位在當(dāng)前區(qū)域的position:fixed不再根據(jù)瀏覽器窗口定位了，而是根據(jù)body來定位了，也就得不到我想要的效果了，排查出是transform: translate3d這個屬性影響的，當(dāng)我通過css強制更改這個屬性的值為默認值的時候，position:fixed表現(xiàn)出了它應(yīng)有的效果，由此我得出了position:fixed在父級有使用transform: translate3d屬性的時候會失效的結(jié)論，至于是否還有其他屬性影響到position:fixed的效果，那就需要在實踐中去體驗了。

作者：方維網(wǎng)絡(luò)樂文慶