【CSS】CSSだけでフローティング（ついてくる）ボタン

画面をスクロールしても、いつも決まった位置（固定位置）にいるボタンをを作ってみます。
jqueryのプラグインを使うとアニメーションをしたり、色々凝ったことができますが、
ここでは簡単にCSSだけで作ってみます。

CSSのサンプル

.floating {
top: 0px;
position: fixed;
z-index: 1;
}

「position: fixed;」で絶対位置の指定になり、スクロールしても位置が固定されたままになります。
他の要素と被っても、前面に出すために「z-index: 1;」を設定しています。

HTMLのサンプル

ボタンタグに「class="floating"」を指定しているだけです。

簡単にできるフローティングのサンプルでした。。。


デモはこちら