このシリーズを開始して、いくつかの興味深い CSS トピックについて説明します。実用性はさておき、いくつかのトピックは、問題を解決するためのアイデアを広げることを目的としています。また、見落とされがちな CSS の詳細も含まれています。
問題を解決する際に互換性は考慮されません。質問は自由で、思いついたことを何でも言ってください。問題を解決する際に馴染みのない CSS プロパティがある場合は、できるだけ早く学習してください。
更新し続けて、更新し続けて、更新し続けて、重要なことは3回言います。
すべてのトピックは私の Github にまとめられています。
z-index
看上去其实很简单,根据 z-index
以下の質問を見て、2 つの
div
A 和 B,被包括在同一个父 div
リーリー
CSS
リーリー
display:inline-block
叠在上面,还是float:left
ここでの DOM の順序に注意してください。最初に生成されます
display:inline-block
,再生成 float:left
リーリー
会发现,无论顺序如何,始终是 display:inline-block
的 div
叠在上方。
Demo戳我。
这里其实是涉及了所谓的层叠水平(stacking level),有一张图可以很好的诠释:
运用上图的逻辑,上面的题目就迎刃而解,inline-blcok
的 stacking level
比之 float
要高,所以无论 DOM 的先后顺序都堆叠在上面。
不过上面图示的说法有一些不准确,按照 W3官方 的说法,准确的 7 层为:
稍微翻译一下:
z-index
的子堆叠上下文元素 (负的越高越堆叠层级越低)inline-block
,无 position
定位(static除外)的子元素position
定位(static除外)的 float 浮动元素inline-block
元素,无 position
定位(static除外)的子元素(包括 display:table 和 display:inline )z-index:0
的子堆叠上下文元素z-index:
的子堆叠上下文元素(正的越低越堆叠层级越低)所以我们的两个 div
的比较是基于上面所列出来的 4 和 5 。5 的 stacking level
更高,所以叠得更高。
不过!不过!不过!重点来了,请注意,上面的比较是基于两个 div
都没有形成 堆叠上下文
这个为基础的。下面我们修改一下题目,给两个 div
,增加一个 opacity
:
.container{ position:relative; background:#ddd; } .container > div{ width:200px; height:200px; opacity:0.9; // 注意这里,增加一个 opacity } .float{ float:left; background-color:deeppink; } .inline-block{ display:inline-block; background-color:yellowgreen; margin-left:-100px; }
デモで私を突いてください。
上記 inline-block
的 div
不再一定叠在 float
的 div
では、HTML コード内の DOM のスタック順序に関係していることがわかります。後で追加された div は、最初に追加された div の上にスタックされます。
ここで重要なポイントは、追加された opacity:0.9
这个让两个 div 都生成了 stacking context(堆叠上下文)
の概念です。このとき、2 つをスタックするには、z-index が必要であり、z-index が大きいほど、スタック レベルが高くなります。
スタッキング コンテキストは HTML 要素の 3 次元の概念であり、これらの HTML 要素は、ウィンドウ (コンピューター画面) または Web ページに面しているユーザーを基準にして、優先順位に従ってスタッキング コンテキストを占めます。独自の空間に。
では、要素の形成をトリガーするにはどうすればよいでしょうか 堆叠上下文
?方法は次のとおりです。MDN からの抜粋です:
つまり、上の 2 つの div に opacity 属性を追加する目的は、スタッキングコンテキストを形成することです。つまり、不透明度を追加し、上記の属性を置き換えることで、同じ効果を得ることができます。
スタッキングコンテキストでは、その子要素も上で説明したルールに従ってスタックされます。 子要素の z-index 値は、親のカスケードのコンテキストでのみ意味があることに特に言及する価値があります。これは、親要素の z-index
低于父元素另一个同级元素,子元素 z-index
の高さが問題ではないことを意味します。
上記のことを理解する stacking-level
与 stacking-context
が、CSS のカスケード順序を理解するための鍵です。
より多くの交流を得るために、すべてのトピックは私の Github にまとめられ、ブログに投稿されます。
この記事はこれで終わりです。まだ質問や提案がある場合は、オリジナルの記事ですので、記事に何か間違っている点があれば、お知らせください。私にお知らせください。