position: stickyをつける要素が兄弟か従兄弟かで挙動が変わる？！

はじめに

テーブルをマークアップする際に、sticky固定したい行が複数ある場合、設計の仕方で挙動が変わりますのでご注意をという話です。
（以下vue.jsでサンプルコード書いております）

①兄弟にstickyがついている場合

<div style="height: 200px; overflow-y: auto">
    <div style="position: sticky; top: 0">ヘッダ-兄</div>
    <div v-for="i in 15" :key="i">{{ i }}</div>
    <div style="position: sticky; top: 0">ヘッダ-弟</div>
    <div v-for="i in 15" :key="i">{{ i }}</div>
</div>

前のsticky要素の上に後ろのsticky要素が重なっていく

②従兄弟にstickyがついている場合

<div style="height: 200px; overflow-y: auto">
    <div style="height: 300px">
      <div style="position: sticky; top: 0">ヘッダ-本人</div>
      <div v-for="i in 15" :key="i">{{ i }}</div>
    </div>
    <div style="height: 300px">
      <div style="position: sticky; top: 0">ヘッダ-従兄弟</div>
      <div v-for="i in 15" :key="i">{{ i }}</div>
    </div>
</div>

前のsticky要素が後ろのsticky要素に押し出される

結論

stickyを付与してる要素の親、つまり同じscroll container内に複数sticky要素がある場合は、scroll containerが押し出されるわけではないので、指定の場所にとどまるが、別scroll containerであればscroll container自体がスクロールで押し出されるので、sticky要素も押し出される感じになる。という感じ