詳解filter與fixed沖突的原因及解決方案
我要評論問題描述
當(dāng)在 body 中使用了 filter 濾鏡屬性的時候，會導(dǎo)致 fixed 元素定位發(fā)生錯誤，即不再相對 viewport 進行定位，而是相對整個網(wǎng)頁（ body 元素）進行定位。
<html>
<head>
<title>css filter issue</title>
<style>
body {
height: 600px;
background: red;
filter: grayscale(1); /* 關(guān)鍵代碼 */
}
.fixed {
color: yellow;
position: fixed;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="fixed">fixed item</div>
</body>
</html>
效果圖如下：注意右上角的 fixed item 元素已經(jīng)不再相對屏幕視圖右上角定位了。
解決方案
產(chǎn)生這個問題的原因就是：當(dāng) filter 不為 none 的時候，如果該元素或者其子元素具有 absolute 或 fixed 屬性，那么它會為其創(chuàng)建一個新的包含塊/容器，會造成該 absolute 或 fixed 元素的定位發(fā)生變化（就是改變了 absolute 或 fixed 元素的定位<父>元素，變成新創(chuàng)建的元素）。
以上面的例子說明，當(dāng)在 body 標(biāo)簽中使用了 filter 屬性后， filter 就會生成一個新的包含塊，其位置大小和 body 一樣，然后 fixed 元素就會根據(jù)這個包含塊進行定位，所以我們會看到 fixed 元素失去原有的特性；
但是，如果 filter 作用在根元素（即 html 標(biāo)簽）時，它是不會為 absolute 或 fixed 子元素創(chuàng)建新的包含塊的。
參考： https://drafts.fxtf.org/filter-effects/#FilterProperty
所以解決方案也就很簡單了，只需要將 filter 屬性放在 html 標(biāo)簽上就好了
html {
filter: grayscale(1);
}
擴展
1. position: fixed
當(dāng)一個元素包含 fixed 屬性時，屏幕視口（ viewport ）會為其創(chuàng)建一個包含塊（ containing block ），其大小就是 viewport 的大小，然后該 fixed 元素基于該包含塊進行定位。所以通常我們會說 fixed 元素是相對 viewport 來定位的。
此外， fixed 屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform , perspective 或 filter 屬性非 none 時，容器由視口改為該祖先。
參考： https://www.w3.org/TR/css-position-3/#fixed-pos
2. HTML 標(biāo)簽和 body 標(biāo)簽
兩者之間的區(qū)別可以參考這邊博客： http://phrogz.net/css/htmlvsbody.html
ps：HTML 元素是 max(屏幕高度<viewport高度>, 內(nèi)部元素高度<body元素高度>)
到此這篇關(guān)于詳解filter與fixed沖突的原因及解決方案的文章就介紹到這了,更多相關(guān)filter與fixed沖突內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS 同級元素position:fixed和margin-top共同使用的問題
這篇文章主要介紹了CSS 同級元素position:fixed和margin-top共同使用的問題的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-13CSS實現(xiàn)模擬position的fixed頁面定位效果
這篇文章主要為大家介紹了CSS實現(xiàn)模擬position的fixed頁面定位效果的方法,可通過absolute絕對定位來實現(xiàn)fixed的固定位置效果,非常具有實用價值,需要的朋友可以參考下2015-05-09css中position:fixed實現(xiàn)div在窗口上下左右居中
實現(xiàn)div居中的方法有很多，本例介紹的使用css中position:fixed來實現(xiàn)div的上下左右居中，下面以一個DIV 元素在瀏覽器窗口居中為例2014-10-20CSS表達式(expression)解決IE6 position:fixed無效問題
IE6 position:fixed無效在做兼容時，很是頭疼，本例通過一條Internet Explorer的CSS表達式(expression)來完美的實現(xiàn)ie6下position:fixed效果，有需要的朋友可以參考下2014-07-28css中postion的fixed與absolute區(qū)別詳解
這篇文章主要介紹了css中postion的fixed與absolute區(qū)別詳解,需要的朋友可以參考下2014-06-18position:fixed或absolute時百分比參考屏幕寬度
用百分比設(shè)定元素的寬度，一般情況是指參考父元素的寬度，當(dāng)position是fixed或absolute時，百分比是參考屏幕的寬度2014-02-19css中關(guān)于定位屬性position為fixed的使用記載
當(dāng)一個div想要定位時，我們第一反應(yīng)是position屬性，而position屬性除了默認(rèn)值外，還有absolute,relative和fixed，下面有個不錯的示例，不懂的朋友可以參考下2013-11-11- 需要在頁面底部中間固定一個塊，大家肯定會想到用positon:fixed來控制同時問題也出現(xiàn)了bottom:0px;能讓其在底部，但是在中間怎么處理呢，接下來為大家?guī)碓敿?xì)的解決方案，2013-03-20
ie6下實現(xiàn)position:fixed效果實例介紹
由于IE6并不支持position:fixed，所以導(dǎo)致很多好的效果都無法實現(xiàn)，但是在IE6下并不是不能夠?qū)崿F(xiàn)，下面就通過一段實例介紹一下如何實現(xiàn)此種效果；建議:盡可能的手寫代碼，2013-02-16IE6瀏覽器不支持固定定位（position：fixed）解決方案
有些朋友在進行網(wǎng)頁布局時，會遇到IE6瀏覽器不支持固定定位(position：fixed)，本文將詳細(xì)介紹此問題的解決方法，需要了解的朋友可以參考下2012-12-04
