99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

filter與fixed沖突的原因有哪些

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

沐川網站建設公司成都創新互聯,沐川網站設計制作，有大型網站制作公司豐富經驗。已為沐川上1000+提供企業網站建設服務。企業網站搭建\外貿網站制作要多少錢，請找那個售后服務好的沐川做網站的公司定做！

問題描述

當在 body 中使用了 filter 濾鏡屬性的時候，會導致 fixed 元素定位發生錯誤，即不再相對 viewport 進行定位，而是相對整個網頁（ body 元素）進行定位。

<html>
  <head>
    <title>css filter issue</title>
    <style>
      body {
        height: 600px;
        background: red;
        filter: grayscale(1); /* 關鍵代碼 */
      }

      .fixed {
        color: yellow;
        position: fixed;
        top: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="fixed">fixed item</div>
  </body>
</html>

效果圖如下：注意右上角的 fixed item 元素已經不再相對屏幕視圖右上角定位了。

filter與fixed沖突的原因有哪些 

解決方案

產生這個問題的原因就是：當 filter 不為 none 的時候，如果該元素或者其子元素具有 absolute 或 fixed 屬性，那么它會為其創建一個新的包含塊/容器，會造成該 absolute 或 fixed 元素的定位發生變化（就是改變了 absolute 或 fixed 元素的定位<父>元素，變成新創建的元素）。

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

但是，如果 filter 作用在根元素（即 html 標簽）時，它是不會為 absolute 或 fixed 子元素創建新的包含塊的。

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

所以解決方案也就很簡單了，只需要將 filter 屬性放在 html 標簽上就好了

html {
	filter: grayscale(1);
}

擴展

1. position: fixed

當一個元素包含 fixed 屬性時，屏幕視口（ viewport ）會為其創建一個包含塊（ containing block ），其大小就是 viewport 的大小，然后該 fixed 元素基于該包含塊進行定位。所以通常我們會說 fixed 元素是相對 viewport 來定位的。

此外， fixed 屬性會創建新的層疊上下文。當元素祖先的 transform , perspective 或 filter 屬性非 none 時，容器由視口改為該祖先。

參考： https://www.w3.org/TR/css-position-3/#fixed-pos

2. HTML 標簽和 body 標簽

兩者之間的區別可以參考這邊博客： http://phrogz.net/css/htmlvsbody.html

ps：HTML 元素是 max(屏幕高度<viewport高度>, 內部元素高度<body元素高度>)

感謝你能夠認真閱讀完這篇文章，希望小編分享的“filter與fixed沖突的原因有哪些”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

文章標題：filter與fixed沖突的原因有哪些
分享網址：http://www.yijiale78.com/article18/ghdegp.html

成都網站建設公司_創新互聯，為您提供標簽優化、移動網站建設、網站建設、網頁設計公司、軟件開發、營銷型網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

搜索引擎優化