程序員應(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的效果。
 
當(dāng)然，有人會(huì)說(shuō)那應(yīng)該沒(méi)關(guān)系吧，反正在一屏式的頁(yè)面中，定的位置是一樣的，沒(méi)什么區(qū)別啊，在正常的一屏式頁(yè)面中確實(shí)沒(méi)什么差別，一屏式頁(yè)面本身就是瀏覽器窗口的大小，在這個(gè)區(qū)域內(nèi)position:fixed和position:absolute這兩個(gè)屬性其實(shí)沒(méi)什么區(qū)別吧。然而我這里做的是一屏式的響應(yīng)式，而且在移動(dòng)端的時(shí)候要取消一屏式的效果，讓每一屏的頁(yè)面內(nèi)容不再局限在一屏的范圍內(nèi)，需要可以調(diào)控內(nèi)容區(qū)域的高度（這里我之前也有寫過(guò)），在這樣的前提下，上訴的問(wèn)題就出來(lái)了，我定位在當(dāng)前區(qū)域的position:fixed不再根據(jù)瀏覽器窗口定位了，而是根據(jù)body來(lái)定位了，也就得不到我想要的效果了，排查出是transform: translate3d這個(gè)屬性影響的，當(dāng)我通過(guò)css強(qiáng)制更改這個(gè)屬性的值為默認(rèn)值的時(shí)候，position:fixed表現(xiàn)出了它應(yīng)有的效果，由此我得出了position:fixed在父級(jí)有使用transform: translate3d屬性的時(shí)候會(huì)失效的結(jié)論，至于是否還有其他屬性影響到position:fixed的效果，那就需要在實(shí)踐中去體驗(yàn)了。

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