※ ChatGPTを利用し、要約された質問です(原文:position: sticky;で教えてください)
position: sticky;で教えてください
このQ&Aのポイント
HTMLの要素にposition: sticky;を指定することで、スクロール追従させることができます。
ただし、質問文章のコードにはタグのスペルミスや誤った属性の使い方があります。
正しいコードに修正し、スクロール追従させたい要素にclass属性を付けて指定してください。
position: sticky;で教えてください
何が間違っているのかわかりません。
間違いを指摘していただきたいです。
●HTML
<body>
<article>
<header>
ヘッダ
</header>
<div class="content">
<section class="right">
<div class="sticky">ここをスクロール追従させたい</div>
</section>
<section class="left">
<p>左側ボックス</p>
</section>
</div>
<footer>
<address>Copyright (C) 2018All Rights Reserved.</address>
</footer>
</article>
</body>
</html>
●CSS
article{
width:800px;
margin-left:auto;
margin-right:auto;
}
header{margin-bottom:50px;}
.right{
width:200px;
float:right;
}
.left{
width:550px;
float:left;
}
footer{clear:both;}
.sticky {
postion: -webkit-sticky;
position: sticky;
top:0px;
background-color:#09F;
}
よろしくお願いいたします。
補足
ごめんなさい!説明不足でした(汗) <section class="right"> <div class="sticky">ここをスクロール追従させたい</div> </section> ここのボックスをスクロールしても追従してくるようにposition: sticky;でしたいです。 でも上記の書き方だと動きません。動かすために何が間違っているのかご指摘してほしいです。 教えていただいたCSS書き換えてみましたが、やはり動きませんでした。 ・・・・何が間違っているのでしょうか・・・? お分かりになりますでしょうか。