子要素の position:sticky; を効かせたい

Question

実現したいこと

HTML構造を変えずにCSSのみで、ピンクの要素（.sticky）のみを position:sticky; にするにはどうしたらいいでしょうか？

<header>
  <div class="relative">固定しない</div>
  <div class="sticky">固定する</div>
</header>
<main>
</main>

header {display: flex;}
body {height: 2000px; margin: 0;}
header {position:sticky; top:0;} /* これだとどっちも固定される */
.relative {background: skyblue;}
.sticky {background: salmon;}

試したこと

上だとどっちも固定されるので、子要素の一方だけを指定しましたがこれはできず、

header {} /* 指定をなくす */
.sticky {position:sticky; top:0;} /* 追加 */

また子要素をinitial指定してもできませんでした。

.relative {position:initial;} /* 追加 */

Answer 1

ピンクの要素（.sticky） を固定させたいということですが、何に対して固定させたいのでしょうか。

position:sticky;は設定した要素の親要素の範囲内で固定するというものです。親要素の範囲から出ることはできません。
現状の設定だと、高さを設定していないので、親要素(header)と子要素(.sticky)の高さが同じになってます。よって、親要素と一緒にスクロールします。

親要素の高さを設定すれば、その範囲内で固定されます。
例えば、下記のように設定すれば、500pxスクロールまでは固定されます。

header {
  display: flex;
  height: 500px; /* 高さ設定 */
}
body {
  height: 2000px;
  margin: 0;
}
.sticky {
  position: sticky;
  top:0;
  align-self: flex-start; /* 上端揃え */
} 

もし、親要素(header) に関係なく、画面に対して固定させたいなら、position: fixed;を設定すればいいでしょう。

header {
  display: flex;
}
body {
  height: 2000px;
  margin: 0;
}
.sticky {
  position: fixed;
  left: 80px;
}