私の実際の Web サイトには実際のコンテンツがありますが、この例で十分です。LOGO は実際にはロゴ画像です。ツールバーもイメージです。次のコードを使用して、top:35px ではなく、bottom:0 を使用するだけで、ツールバーを下部に保持しました。私は基本的に、ツールバーをページの上部に固定し、ロゴによってのみ押し下げられるようにしたいと考えています。uesr が下にスクロールすると、ツールバーはページの上部に留まります。すべてのコンテンツはツールバーの下に流れる必要があるため、Z インデックスが高くなります。私が持っている方法では、ツールバーは 35px でずっと下に乗っています。理由はわかっていますが、自分がやろうとしていることを達成する方法がわかりません。
<html>
<head>
<style type="text/css">
#logo {
width:100%;
height:34px;
}
#toolbar {
position: fixed;
top: 35px;
z-index:1000;
}
</style>
</head>
<body>
<div id="logo">LOGO</div>
<div id="toolbar">TOOLBAR</div>
<div id="content">
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
<p>lorem ipsum doler</p><br />
</div>
</body>
</html>