position:fixed;をIE6に対応させる

常に見せたい要素とかないですか？そんなときは指定した要素をスクロールしても動かなくする「position:fixed;」がとっても便利なのですが、注意してほしいことがあって、IE6では使えません。なのでIE6ではハックを使って専用のCSSを書きましょう！！

ソース

#sub_a .plugin {
	position			:fixed;
	top			:24px;
	left			:0;
	width			:151px;

}

/* IE6用 */
* html { overflow:hidden; }
* html body { height:100%; overflow:auto; margin:0; }
* html #sub_a .plugin {
	position			:absolute;
	top			:24px;
	left			:0;
	width			:151px;
}

上のソースではフリープラグイン(.plugin)をスクロールしても動かないよう固定しました。フリープラグインは本棚です。IE6以外のブラウザではposition:fixed;でウィンドウ枠基準の絶対配置で固定。topとleftで左上に配置しています。IE6では専用の記述をします。IE6ではposition:absolute;で疑似的にfixedを表現しています。

アメブロユーザーの方向けに注意として一番上の広告（アメーババー）があるので上に固定する場合はtop:24px;と書きます。またまだ記事書いてませんがposition:relative;とposition:absolute;を親要素・子要素で使うやり方がアメブロでは流行ってますが、#subFrameにposition:relative;を使用してるときはIE6用のtop（赤太字)は0pxになります。

詳細

• *サンプルソースになります。書き換えてお使いください。