実現したいこと
HTML構造を変えずにCSSのみで、ピンクの要素(.sticky)のみを position:sticky; にするにはどうしたらいいでしょうか?
HTML
<header> <div class="relative">固定しない</div> <div class="sticky">固定する</div> </header> <main> </main>
CSS
header {display: flex;} body {height: 2000px; margin: 0;} header {position:sticky; top:0;} /* これだとどっちも固定される */ .relative {background: skyblue;} .sticky {background: salmon;}
試したこと
上だとどっちも固定されるので、子要素の一方だけを指定しましたがこれはできず、
CSS
header {} /* 指定をなくす */ .sticky {position:sticky; top:0;} /* 追加 */
また子要素をinitial指定してもできませんでした。
CSS
.relative {position:initial;} /* 追加 */
まだ回答がついていません
会員登録して回答してみよう