【CSS】スクロールしても画像を固定表示させる方法

画像を固定で配置し、スクロールしてもその場に表示させる方法２種類を備忘録としてポストします。

画像を固定表示させるCSS

サンプル1

ブラウザの左端に固定表示させる方法。

イメージ

HTML

CSS

position: fixed; で、固定、
left: 0 でブラウザの内側、左端、
top: 50 でブラウザの内側、上から 50ピクセルの位置に表示させています。

right: 0 とすれば、右端に表示されます。

サンプル1 デモ

デモ１はこちらから

サンプル2

コンテンツの右端に固定表示させる方法。

イメージ

HTML

CSS

position: fixed; で、固定、
margin-left: 871px; でコンテンツの外側へ配置、
top: 70 でブラウザの内側、上から 70ピクセルの位置に表示させています。

サンプル2 デモ

デモ２はこちら。

-HTML,CSS
-スクロール, 固定表示