フィルターと固定間の競合の原因と解決策の詳細な説明

問題の説明

body内でfilter属性を使用すると、 fixed要素の位置が不正確になります。つまり、 viewportを基準に配置されるのではなく、Web ページ全体 ( body要素) を基準に配置されることになります。

<html>
  <ヘッド>
    <title>CSS フィルターの問題</title>
    <スタイル>
      体 {
        高さ: 600px;
        背景: 赤;
        filter: grayscale(1); /* キーコード*/
      }

      。修理済み {
        色: 黄色;
        位置: 固定;
        上: 0;
        右: 0;
      }
    </スタイル>
  </head>
  <本文>
    <div class="fixed">修正された項目</div>
  </本文>
</html>

効果図は次のようになります。右上隅のfixed item要素が、画面ビューの右上隅を基準に配置されなくなったことに注意してください。

解決

この問題の原因は、 filterがnoneでない場合、要素またはその子要素にabsoluteまたはfixed属性があると、新しい包含ブロック/コンテナーが作成され、それによってabsolute要素またはfixed要素の位置が変更されることです (つまり、 absolute要素またはfixed要素の位置 <parent> 要素が、新しく作成された要素に変更されます)。

上記の例では、 bodyタグでfilter属性を使用すると、 filter bodyと同じ位置とサイズの新しい包含ブロックを生成し、この包含ブロックに従ってfixed要素が配置されるため、 fixed要素が元の特性を失っていることがわかります。

ただし、フィルターがルート要素 (つまり、HTML タグ) に作用する場合、絶対または固定の子要素に対して新しい包含ブロックは作成されません。

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

解決策は非常に簡単で、 htmlタグにfilter属性を追加するだけです。

html{
	フィルター: グレースケール(1);
}

拡張機能

1. position: fixed

要素にfixed属性が含まれている場合、画面viewport 、その要素に対してviewportと同じサイズのcontaining blockを作成し、その包含ブロックに基づいて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 要素は最大(画面の高さ <ビューポートの高さ>、内部要素の高さ <本体要素の高さ>) です。

以上で、フィルターと固定の競合の原因と解決方法についての説明は終了です。フィルターと固定の競合の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: ウェブフロントエンドエンジニアにおすすめのヒント

>>: Linux スクリプトの基礎を詳しく紹介