欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解filter與fixed沖突的原因及解決方案

  發(fā)布時(shí)間：2020-04-09 15:41:36   作者：Huanqiang   我要評(píng)論
這篇文章主要介紹了詳解filter與fixed沖突的原因及解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

問題描述

當(dāng)在 body 中使用了 filter 濾鏡屬性的時(shí)候，會(huì)導(dǎo)致 fixed 元素定位發(fā)生錯(cuò)誤，即不再相對(duì) viewport 進(jìn)行定位，而是相對(duì)整個(gè)網(wǎng)頁（ 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ì)屏幕視圖右上角定位了。

 

解決方案

產(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 來定位的。

此外， 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元素高度>)

到此這篇關(guān)于詳解filter與fixed沖突的原因及解決方案的文章就介紹到這了,更多相關(guān)filter與fixed沖突內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論