前言

這個(gè)問題可能比較奇怪，干嘛要讓position: fixed失效呢？

其實(shí)主要的場景是應(yīng)用在移動(dòng)端跟PC端兼容的問題上，在移動(dòng)端，fixed根據(jù)瀏覽器窗口定位，這沒問題，但是如果將頁面用PC打開，想讓頁面以375px顯示在屏幕中央，以便模擬手機(jī)體驗(yàn)，同時(shí)還想讓position: fixed也只在375px內(nèi)生效，這就有點(diǎn)意思了。

默認(rèn)是辦不到的，那么怎么辦？

實(shí)現(xiàn)原理

MDN對position: fixed有一個(gè)注釋：

當(dāng)元素祖先的 transform 屬性非 none 時(shí)，容器由視口改為該祖先。

也就是說，只要給它的隨便哪個(gè)祖先設(shè)上非none的transform，問題就解決了。這祖先可以是static的，也就是說隨便哪個(gè)祖先都行。但是，由于要模擬手機(jī)體驗(yàn)，所以基于body元素比較妥。

比如說給body設(shè)一個(gè)transform: translateZ(0);，測試有效。

由于在PC環(huán)境下，我們通過媒體查詢等手段限定了body的寬度，那么fixed元素也只會(huì)在這個(gè)寬度內(nèi)生效了。