CSS 元素叠加关系

同级元素叠加时层级关系，绿色块为上元素1，蓝色块为下元素2

叠加关系涉及到盒子在3维空间中z轴位置，在渲染树中这种叠加顺序（order）有一个专门术语，叫层叠上下文（stacking context），详见W3C Stacking Content， 具体形成参见 MDN Stacking Context

正常文档流

下元素2叠在上元素1上

<div>
    <div>1</div>
    <div>2</div>
</div>

改变叠加关系的方式有：

• opacity，值小于1
  1opacity: 0.9

  2
• transform、filter、perspective，值非 none
  1transform: scale(1)

  2
• isolation: isolate
  1isolation: isolate

  2

position relative定位

下元素2叠在上元素1上

<div style="position: relative">
    <div style="position: relative">1</div>
    <div style="position: relative">2</div>
</div>

改变叠加关系的方式有：

• z-index，值越大层级越高
  1z-index: 1

  2

flex布局

下元素2叠在上元素1上

<div style="display: flex; flex-wrap: wrap; flex-direction: column">
    <div>1</div>
    <div>2</div>
</div>

改变叠加关系的方式有：

• opacity，值小于1
  1opacity: 0.9

  2
• transform、filter、perspective，值非 none
  1transform: scale(1)

  2
• z-index，值越大层级越高
  1z-index: 1

  2
• isolation: isolate
  1isolation: isolate

  2