今まで使いそうで使わなかった横方向固定、縦フィックスのポジション設定。

ついに今日仕事で使うことになった。

 

よくいろんなサイトで使われているCSSですが、人のソースを見るのは元来苦手なもんで、ちょっと考えた末に作ってみた。

 

 

以下は、固定幅960px下でページトップへボタンに設定することを想定しています。

ページトップへボタンのサイズは横幅50px。

960pxの右終端にぴったり入れられるように設定。

.pagetop{
/* ↓(960÷2＋ボタンサイズ50px)×-1
余白を取りたい場合は、更にネガティブマージンを減らす。
(例：ボタン左端に20pxの余白を取りたい場合は-550px等) */
margin-right:-530px;
position:fixed;
bottom:15px;
right:50%;
z-index:0;
}
* html .pagetop{
margin-right:0;
position:static;
text-align:right;
}

 

あとは表示したい場所に、pagetopのクラスを付けたボタンを配置する。

IE6のCSSハック部分は、position fixedに対応していないため配置したボタンを固定しておくため。

 

まぁ、少し掛け方を変えればposition:absoluteを用いたIE6に擬似的なpositon fixを再現するコードと併用して、同じような動作をさせることも可能。

また、jQueryで表示制御をする際に余計なスクリプトやプラグインを読んだりする必要もなくなる。