こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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;
}



よろしくお願いいたします。

投稿日時 - 2018-08-07 16:21:13

QNo.9525495

すぐに回答ほしいです

質問者が選んだベストアンサー

どうしたいかがわからないので、何が間違いなのかもわかりませんが……。

単純なタイポと言うことではないですよね。

.sticky {
postion: -webkit-sticky; /*position: -webkit-sticky;*/
position: sticky;
top:0px;
background-color:#09F;
}

参考まで。

投稿日時 - 2018-08-07 17:37:27

補足

ごめんなさい!説明不足でした(汗)

<section class="right">
<div class="sticky">ここをスクロール追従させたい</div>
</section>
ここのボックスをスクロールしても追従してくるようにposition: sticky;でしたいです。

でも上記の書き方だと動きません。動かすために何が間違っているのかご指摘してほしいです。

教えていただいたCSS書き換えてみましたが、やはり動きませんでした。
・・・・何が間違っているのでしょうか・・・?
お分かりになりますでしょうか。

投稿日時 - 2018-08-09 13:30:50

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問