在flex之上堆叠，并且使用%宽高和%定位

position的3个选项：

static：默认。无法用top语句。%宽度基于父元素。

absolute：基于正常流位置，不占空间。top语句：基于最近的父元素（必须是relative定位）的顶部向下偏移（%宽度也基于该元素）

relative：基于正常流位置，占空间。top语句：基于当前位置向下偏移，实际位置和占空间的位置会不同。%宽度基于父元素。

top偏移的大小等于height%的大小，left同理。

<div>
    <h1 style='display: flex'></h1>
    <h2><h3></h3></h2>
</div>

如果h2设为absolute，百分比宽高和定位不会基于div，而是它之上的relative元素。

因此要先把h2设为relative（一条高度0的横线），然后h3设为absolute，这样h2用top:n%就可以在div上下移动百分比了，h3的高度也可以使用百分比。

如果h3同时要使用宽高百分比，则h2要再加上height: 100%;bottom: 100%; ，意思是h2基于当前位置向上偏移1个div的高度，且指定h2的高为div的高。然后h3就可以基于h2左上边和宽高，来写百分比left、top、宽高了。

<div>
    <h1 style='display: flex'></h1>
    <h2 style="position: relative;height: 100%;bottom: 100%;">
        <h3 style="position: absolute;"></h3>
    </h2>
</div>

（这样做会导致div高度溢出，但div并不会计算末尾不可见区域的高度，结果并没有溢出）