固定した位置に配置する


最近Twitterの「フォローミーボタン」や「TOPへ戻るボタン」などで、
スクロールしても位置が固定したまま、
のようなデザインを見かける機会が増えてきたかと思います。
これを実現するにはpositionプロパティを使用します。

固定配置。

固定配置その2。

.kotei {
position:fixed;
right:0px;
top:120px;
font-size:30px;
border:solid 1px #666;
background-color:#EEE;
}

.kotei2 {
position:fixed;
left:0px;
bottom:20px;
font-size:13px;
border:solid 1px #666;
color:#FFF;
background-color:#333;
padding:5px;
}

position:fixed; と指定することで固定配置になります。

※なおIE6ではfixedは対応していないので、
IE6でも対応したい場合は別個に対策が必要となります。

にて、IE6でもpostion:fixedを再現するjsライブラリが紹介されています。
またCSSのみでも対応できる方法もあるようで、

にて詳しい方法が紹介されています。

One Response to “固定した位置に配置する”

  1. [...] webOpixel Webpark memocarilog セカンドゲート CSSOBOEGAKI [...]

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る