実現したいこと
HTML構造を変えずにCSSのみで、ピンクの要素(.sticky)のみを position:sticky; にするにはどうしたらいいでしょうか?
HTML
1<header> 2 <div class="relative">固定しない</div> 3 <div class="sticky">固定する</div> 4</header> 5<main> 6</main>
CSS
1header {display: flex;} 2body {height: 2000px; margin: 0;} 3header {position:sticky; top:0;} /* これだとどっちも固定される */ 4.relative {background: skyblue;} 5.sticky {background: salmon;}
試したこと
上だとどっちも固定されるので、子要素の一方だけを指定しましたがこれはできず、
CSS
1header {} /* 指定をなくす */ 2.sticky {position:sticky; top:0;} /* 追加 */
また子要素をinitial指定してもできませんでした。
CSS
1.relative {position:initial;} /* 追加 */
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。