Eyecatch html css

HTML,CSS

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

2015/06/08

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

画像を固定表示させる

サンプル1

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

イメージ

fixed_image_demo1

HTML

CSS

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

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

デモ1

デモ1はこちらから

サンプル2

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

イメージ

fixed_image_demo2

HTML

CSS

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

デモ2

デモ2はこちらから

365 Days of Danboard

365 Days of Danboard

アリエル ナデル

     

-HTML,CSS
-, , , , ,