CSS > CSS3_html/css_WEB-ITnose のカスケードコンテキストの概要-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS > CSS3_html/css_WEB-ITnose のカスケードコンテキストの概要

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:35 AM

前書き: カスケードコンテキストに関して、著者はより本質的な原則を理解するために、より詳細な W3C 仕様を読んでいません (申し訳ありませんが、学校が採用活動を行ってオファーを受け取ったら勉強します T_T)。 CSS3 のカスケードコンテキストについて何か新しいことがあるということはよく聞いていましたが、適切な参考資料が見つからなかったので、自分で試してみました。著者のレベルが限られているため、記載漏れや誤りがある場合は、読者の皆様におかれましては修正をお願いいたします。

1 CSS2.1 で指定されたスタッキングコンテキスト

スタッキングコンテキストを形成する要素の最下位レベル。

のスタッキングコンテキスト。負の z-index を持つ子孫要素

ブロックレベルボックス ? インフローの非インラインレベルの非配置子孫。

非配置フロート
インフローインラインレベルの非配置子孫
Z-index: 0
? これらは新しいスタッキングコンテキストを形成します。
正の Z-index 画像とテキストのソース: http:// webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892

今度は著者が翻訳する時間です!上記の用語を説明する前に、2 つの用語を明確にする必要があります。「位置指定」は、位置が相対的、絶対的、または固定である要素を指し、「非位置指定」はその逆です。

背景と境界線
: カスケードコンテキスト要素の背景と境界線を作成します。スタックの最下位レベル

負の Z インデックス

: 負の Z-インデックスを持つ子孫要素に対して確立されたスタックコンテキスト

ブロックレベルボックス: 非インラインレベル、非配置の子孫要素ドキュメントフロー内
フローティングボックス: 位置決めされていないフローティング要素 (作成者注: 位置:相対のフローティングボックスは除外されます)
インラインボックス: ドキュメントフロー内のインラインレベルの位置決めされていない子孫要素ドキュメントフロー
Z-index:0:要素を配置します。これらの要素は、新しいスタッキングコンテキストを確立します (著者注: 必ずしも必要というわけではありません。詳細については以下を参照してください)
正の Z-index: (z-index は正です) 位置決めされた要素。最高レベルのカスケード
引用は上にリストされています。ただし、著者は、要素を「Z-index: 0」レベルに配置しても、必ずしも新しいカスケードコンテキストが作成されるわけではないことを読者に思い出させています。理由:
CSS2.1: (z-index: auto) 現在のスタッキングコンテキストで生成されたボックスのスタックレベルは 0 です。ボックスは、ルート要素でない限り、新しいスタッキングコンテキストを確立しません。
要素 z-index: auto を配置する場合、現在のスタッキングコンテキストで生成されるボックスのレベルは 0 です。ただし、ボックスはルート要素でない限り、新しいスタッキングコンテキストを作成しません。仕様はこんな感じですが、IE6-7では位置指定要素がz-index:autoであってもカスケードコンテキストを作成してしまうバグがあります。

2 CSS3 によってもたらされる変更点

一般に、変更点は 2 つの点に分類できます。後で 1 つずつ説明します:

CSS3 の多くのプロパティはローカルカスケードコンテキストを作成します

属性の変更を絶対に変換します位置決めされた子要素包含ブロック

2.1 新しいカスケードコンテキストを生成する状況

次の状況では、新しいカスケードコンテキストが生成されます:

ルート要素 (HTML)

絶対または相対位置と z -index 値が auto

A Flex アイテムではなく、z-index 値が auto ではありません。つまり、親要素の表示: flex|inline-flex

要素の不透明度属性値が小さいです。 1より
要素のtransform属性値がnoneではない
要素のmix-blend-mode属性値が通常ではない
要素のfilter属性値が通常ではない
要素のisolation属性値is isolate
position:fixed
will-change は、これらの属性を直接定義していない場合でも、上記の属性のいずれかを指定します
要素の -webkit-overflow-scrolling 属性値は touch です
上記のリストは次から翻訳されています:
https:/ /developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context、読者には中国語版を読まないように注意してください。中国語版はリアルタイムで更新されず、翻訳もあまり正確ではないためです
上記の要素が新しいスタッキングコンテキストを作成するとき、それらはスタッキングコンテキストのレベルも上げます要素自体がそこに配置されます。

不透明度が 1 未満の要素が配置されていない場合、実装は、親のスタックコンテキスト内で、「z-index: 0」で配置された要素の場合に使用されるのと同じスタック順序で、作成するレイヤーをペイントする必要があります。 ' および 'opacity: 1'。不透明度が 1 未満の要素が配置されている場合、[CSS21] で説明されているように 'z-index' プロパティが適用されます。ただし、新しいスタッキングコンテキストのため 'auto' は '0' として扱われます。は常に作成されます。

要素の不透明度が 1 未満で、配置されていない場合、配置されている場合のスタック順序 (z-index: 0、不透明度: 1) で親のスタックコンテキストに描画する必要があります。。不透明度が 1 未満で位置決めされている場合、CSS2.1 に従って z-index プロパティが適用されますが、新しいスタッキングコンテキストが常に作成されるため、auto は 0 として扱われます。

次のケース:

div {    width: 100px;    height: 100px;}#box1 {    position: absolute;    background: red;    top: 40px;    left: 40px;}#box2 {    background: blue;}<body>    <div id="box1"></div>    <div id="box2"></div><body>

上記の CSS および HTML フラグメントでは、box1 は絶対位置にあり (レベルは「Z-index: 0」)、box2 はドキュメントフロー内のブロックレベルのボックス (レベルは「Z-index: 0」) であるため、は「ブロックレベルボックス」レベルです)、したがって、box1 は box2 の上に積み重ねられます。以下の CSS ルールを追加します:

#box2 {    opacity: .5;}

この時点で、box2 は box1 の上に重ねられます。 box2 の不透明度は 0.5 (1 未満) であるため、box1 と同じレベルである「Z-index: 0」レベルとみなされます。同レベルの場合、ソースコード上の両者の順序に従い、後方にあるbox2が高台に戻ります。

読者は、同じ効果を達成するために次のルールのいずれかを試してみることができます:

#box2 {    transform: scale(1);    mix-blend-mode: difference;    isolation: isolate;    -webkit-filter: blur(5px);}

2.3 変換は、ブロックを含む絶対位置のサブ要素を変更します

transform 新しいローカルスタッキングコンテキストを作成することに加えて、もの: 子要素のブロックを含む絶対配置を変更します。固定位置決めも絶対位置決めの一種であることに注意してください。

包含ブロックとは何ですか?場合によっては、ボックスがブロックを含む長方形のボックスに基づいて位置とサイズを決定することがあります。詳細については、ビジュアルフォーマットモデルの説明をお読みください。

固定位置の要素

固定位置の要素を含むブロックは、ビューポートによって作成されます (読者が視覚的書式設定モデルで詳細に説明されている情報を理解していれば、次のことがわかるでしょう: その「静的位置」を計算するとき、包含ブロックを計算された包含ブロックとして初期化します)。次に、次のソースコードを見てみましょう:

div {    width: 100px;    height: 100px;}#fixed {    position: fixed;    width: 100%;    height: 100%;    top: 0;    left: 0;    background: blue;}#transform {    background: red;    padding: 20px;}<body>    <div id="transform">        <div id="fixed"></div>    </div></body>

この時点では、位置決めとサイズ計算のための包含ブロックとしてビューポートを使用しており、固定は画面全体をカバーします。

ここで、次のルールを追加します:

#transform {    transform: scale(1);}

この時点で、fixed を含むブロックはビューポートではなくなり、変換のパディングボックスのエッジボックスになります。したがって、この時点ではfixedの幅と高さは両方とも140pxになります。

絶対配置要素

例を挙げてみましょう:

#relative {    position: relative;    width: 100px;    height: 100px;    background: green;}#absolute {    position: absolute;    width: 100%;    height: 100%;    top: 0;    left: 0;    background: blue;}#transform {    background: red;    width: 50px;    height: 50px;}<div id="relative">    <div id="transform">        <div id="absolute"></div>    </div></div>

この時点で、絶対包含ブロックは相対パディングボックスのエッジボックスです。したがって、絶対値の幅と高さは 100px になります。次に、次のルールを追加します:

#transform {    transform: scale(1);}

transform はローカルのスタッキングコンテキストを作成するため、absolute の包含ブロックは相対ではなくなり、この新しい包含ブロックに従って、新しい幅と高さは 50px になります。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform

HTMLでリストを作成するにはどうすればよいですか？May 06, 2025 am 12:01 AM

toreatealistinhtml、useforunorderedlistsandfororderedlists：1）forunorderedlists、wrapitemsinanduseforeachitem、renderingasabulletedlist.2）

HTMLアクション：Webサイト構造の例May 05, 2025 am 12:03 AM

HTMLは、明確な構造のWebサイトを構築するために使用されます。 1）Webサイト構造などのタグを使用し、定義します。 2）例は、ブログとeコマースのウェブサイトの構造を示しています。 3）誤ったラベルネスティングなどの一般的な間違いを避けてください。 4）HTTP要求を削減し、セマンティックタグを使用してパフォーマンスを最適化します。

HTMLページに画像を挿入するにはどうすればよいですか？May 04, 2025 am 12:02 AM

to inertanimageintoanhtmlpage、usethetagwithsrcandaltattributes.1）usealttextforaccessibilityandseo.2）emplencesrcsetForresponsiveimages.3）applylazyloadingwithloading = "lazy" tooptimizeperformance.4）

HTMLの目的：Webブラウザがコンテンツを表示できるようにするMay 03, 2025 am 12:03 AM

HTMLの中心的な目的は、ブラウザがWebコンテンツを理解して表示できるようにすることです。 1。HTMLは、タグなどのタグを介してWebページの構造とコンテンツを定義します。 3.HTMLは、ユーザーの相互作用をサポートするフォーム要素を提供します。 4. HTMLコードの最適化は、HTTP要求の削減やHTMLの圧縮など、Webページのパフォーマンスを改善できます。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。