溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

filter與fixed沖突的原因有哪些

發(fā)布時(shí)間：2021-05-18 15:15:48 來(lái)源：億速云 閱讀：247 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了filter與fixed沖突的原因有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

問題描述

當(dāng)在 body 中使用了 filter 濾鏡屬性的時(shí)候，會(huì)導(dǎo)致 fixed 元素定位發(fā)生錯(cuò)誤，即不再相對(duì) viewport 進(jìn)行定位，而是相對(duì)整個(gè)網(wǎng)頁(yè)（ body 元素）進(jìn)行定位。

<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)不再相對(duì)屏幕視圖右上角定位了。

filter與fixed沖突的原因有哪些 

解決方案

產(chǎn)生這個(gè)問題的原因就是：當(dāng) filter 不為 none 的時(shí)候，如果該元素或者其子元素具有 absolute 或 fixed 屬性，那么它會(huì)為其創(chuàng)建一個(gè)新的包含塊/容器，會(huì)造成該 absolute 或 fixed 元素的定位發(fā)生變化（就是改變了 absolute 或 fixed 元素的定位<父>元素，變成新創(chuàng)建的元素）。

以上面的例子說明，當(dāng)在 body 標(biāo)簽中使用了 filter 屬性后， filter 就會(huì)生成一個(gè)新的包含塊，其位置大小和 body 一樣，然后 fixed 元素就會(huì)根據(jù)這個(gè)包含塊進(jìn)行定位，所以我們會(huì)看到 fixed 元素失去原有的特性；

但是，如果 filter 作用在根元素（即 html 標(biāo)簽）時(shí)，它是不會(huì)為 absolute 或 fixed 子元素創(chuàng)建新的包含塊的。

參考： https://drafts.fxtf.org/filter-effects/#FilterProperty

所以解決方案也就很簡(jiǎn)單了，只需要將 filter 屬性放在 html 標(biāo)簽上就好了

html {
	filter: grayscale(1);
}

擴(kuò)展

1. position: fixed

當(dāng)一個(gè)元素包含 fixed 屬性時(shí)，屏幕視口（ viewport ）會(huì)為其創(chuàng)建一個(gè)包含塊（ containing block ），其大小就是 viewport 的大小，然后該 fixed 元素基于該包含塊進(jìn)行定位。所以通常我們會(huì)說 fixed 元素是相對(duì) viewport 來(lái)定位的。

此外， fixed 屬性會(huì)創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform , perspective 或 filter 屬性非 none 時(shí)，容器由視口改為該祖先。

參考： 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元素高度>)

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“filter與fixed沖突的原因有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手