CSS那些破B事兒系列之position:fixed定位失效

閒言：本身css水平不夠致使前段時間碰到position:fixed定位失效的問題，麻蛋，fixed定位不是一直都是相對於屏幕視口（viewport）的位置來指定fixed屬性元素的位置麼？哎，碰到這種問題只能說本身太菜了，因而各類翻資料，看看fixed到底基於什麼定位，因而就有了下面這些拗心的解釋！！！css

首先看下MDN上是怎麼說的：html

fixedmarkdown

不爲元素預留空間，而是經過指定元素相對於屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出如今的每頁的固定位置。fixed 屬性會建立新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改成該祖先。oop

What?spa

好吧，我認可這部分MDN看的實在是少，工做最初就接觸html、css，遵循着老路就走下來了，這裏有兩個我以前不知道的概念，層疊上下文與元素祖先的 transform 屬性非 none，看到MDN的解釋就是要fixed定位的元素若是其所在DOM結構的父元素或者祖先元素出現transform 屬性非 none 時fixed相對的位置會由基於屏幕視口（viewport）變爲基於其父元素或者祖先元素。好坑啊！！！code

引用個例子來講明一下：orm

<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上，實際結果至關於相對transformEle元素定位，就是fixed相對的不是visual viewport，而是transformELe, 產生這樣的緣由主要是由於transform和position: fixed使用了不一樣的座標系統。htm

層疊上下文 這個有時間再繼續寫一下。