固定した位置に配置する

最近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でも対応したい場合は別個に対策が必要となります。

to-RさんのIEでposition:fixedを再現するFixed positioning

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

CSS-EBLOGさんのCSSのみでIE6にposition:fixedを対応させる

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

コメントを投稿する