◀︎

#abcdef
dodgerblue
#456789

Stacking Context (レイヤーのような概念)

Stacking context is a concept in CSS that determines the layering order of elements on the webpage. It is a three-dimensional concept that governs how elements are stacked on top of each other when using z-index. When a stacking context is created (typically by setting position and z-index on an element), the child elements within that context will be stacked relative to each other, based on their z-index values.

スタッキング・コンテキストは CSS における概念で, ウェブ・ページ上で要素が重なり合う順番を決める記述です. これは三次元的な法則で, z-index を使用して要素の重ね順を数字で決定させます(大きな数が上になる). スタッキング・コンテキストを作成すると (要素に position と z-index を設定すると) そのコンテキスト内の子要素は z-index の値に基づいて相対的に重なる順番が決まります.

<div class="地球">#abcdef
<div class="月">dodgerblue</div>
<div class="衛星">#456789</div>
</div>