問題
18
CSS
fixedで要素を固定しよう
fixedとは、positionプロパティで指定できる値で、要素を画面に固定して表示する際などに使用します。fixedは固定したという意味を持ちます。
CSSの問題に挑戦しよう！
問題
「fixedで要素を固定しよう」
用意したページをスクロールした時、右上の忍者CODEが
追尾するように設定してみましょう。
あらかじめエディタに書くコード
<div class="pages">
<div class="page1"></div>
<div class="page2"></div>
<div class="page3"></div>
<div class="tracking">忍者CODE</div>
</div>
¥HTML¥
.page1 {
height: 1000px;
background: #BAD3FF;
}
.page2 {
height: 1000px;
background: #B1F9D0;
}
.page3 {
height: 1000px;
background: #FFC7AF;
}
¥CSS¥
期待する画面
解答と解説（fixedで要素を固定しよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
要素を追尾させるには、position: fixed;を使用します。
追尾させたい要素に対してfixedを指定し、absoluteと同様にtopやleftなどで位置を指定すればOKです。
ポイント
position:fixedとは
position:fixedとは、absoluteと同じく絶対位置指定要素の1つで、和訳では「不動」という意味を持ちます。
fixedは、body要素(html)を基準とした位置指定になります。
スクロールしてもブラウザに固定される特徴があります。
その為、Webページの追尾バナーや固定ヘッダーなどによく利用されています。
