閑言：自己css水平不夠?qū)е虑岸螘r間碰到position:fixed定位失效的問題，麻蛋隅要，fixed定位不是一直都是相對于屏幕視口（viewport）的位置來指定fixed屬性元素的位置么？哎要门，碰到這種問題只能說自己太菜了廓啊，于是各種翻資料，看看fixed到底基于什么定位谴轮，于是就有了下面這些拗心的解釋！４啊！
首先看下MDN上是怎么說的：
fixed:
不為元素預(yù)留空間廓推，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變樊展。打印時，元素會出現(xiàn)在的每頁的固定位置。fixed 屬性會創(chuàng)建新的層疊上下文顽频。當(dāng)元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先糯景。
What?
好吧，我承認(rèn)這部分MDN看的實在是少最住，工作最初就接觸html、css涨缚，遵循著老路就走下來了策治，這里有兩個我之前不知道的概念，層疊上下文與元素祖先的 transform 屬性非 none通惫，看到MDN的解釋就是要fixed定位的元素如果其所在DOM結(jié)構(gòu)的父元素或者祖先元素出現(xiàn)transform 屬性非 none 時fixed相對的位置會由基于屏幕視口（viewport）變?yōu)榛谄涓冈鼗蛘咦嫦仍亍：每影珊燎。遵湖。。?/p>
引用個例子來說明一下：
<style>
.transformEle {
width: 400px;
height: 400px;
transform: translateY(200px);
background: #00D287;
}
.fixedEle {
position: fixed;
bottom: 0;
width: 50px;
height: 50px;
background: #FF3131;
}
</style>
<div class=transformEle>
<div class=fixedEle>
</div>
</div>
如果transformEle使用了transform卓箫，而fixedEle使用了position: fixed垄潮，那么position: fixed不會有固定在visual viewport上闷盔，實際結(jié)果相當(dāng)于相對transformEle元素定位逢勾，就是fixed相對的不是visual viewport，而是transformELe, 產(chǎn)生這樣的原因主要是因為transform和position: fixed使用了不同的坐標(biāo)系統(tǒng)溺拱。
-
層疊上下文
這個有時間再繼續(xù)寫一下谣辞。
