Twitterやニコニコ動画（原宿）的なヘッダーバーを実現してみる

最近よく見る、あれ

サンプルHTML

<body> 
	<div id="content">
		<div id="bar-parent-box">
			<div id="bar-child-box">
				Twitter的なバーのサンプル
			</div>
			<div class="float-clear"></div>
		</div>
    	        <div id="main">
	    	        <!--適当に中身-->
	        </div>
	</div>
</body>

こんな感じのHTMLを用意する。

CSSで大事なことはたぶん、次の４つ

ヘッダーバーをposition: fixedにする
ヘッダーバーのz-indexを一番大きい値にする
ヘッダーバーにleft: 0px; top:0px;を指定する
ヘッダーバーの内側のdivのpadding-topを適当に付ける

サンプルCSS

html, body {
	background-color: #fff;
	margin: 0px;
	position: relative;
	z-index: 1;
}
div.float-clear {
	height: 0px;
	clear: both;
}
div#content {
	width: 100%;
	margin: 0px;
	color: #000;
	background-color: #fff;
	padding: 0px;
	position: relative;
	z-index: 2;
}
div#bar-parent-box {
	width: 100%;
	left: 0px; #ここ重要
	top: 0px; #ここ重要
	margin: 0px;
	padding: 0px;
	position: fixed; #ここ重要
	z-index: 10; #ここ重要
}
div#bar-child-box {
	width: 100%;
	height: 25px;
	color: #fff;
	background-color: #222;
	text-align: center;
	margin: 0px;
	padding: 5px 0px 0px 0px; #ここ重要
	position: relative;
}

これでうまくいくと思う。