CSS
LINEでログイン
Googleでログイン
Twitterでログイン
position:fixedとは
position:fixedとは、absoluteと同じく絶対位置指定要素の1つで、和訳では「不動」という意味を持ちます。
fixedは、body要素(html)を基準とした位置指定になります。
スクロールしてもブラウザに固定される特徴があります。
その為、Webページの追尾バナーや固定ヘッダーなどによく利用されています。
CSSの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。
問題18：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¥
期待する画面
解答ソースコード
.tracking {
position: fixed;
right: 20px;
top: 20px;
background: #ccc;
}
¥CSS¥
完了にする！
活動記録をTweetする
追尾させたい要素に対してfixedを指定し、absoluteと同様にtopやleftなどで位置を指定すればOKです。