固定ヘッダーを使用し、その背後にあるコンテンツを使用したい。メニューにはアンカー リンクが含まれるため、すべてのコンテンツが 1 ページに表示されます。
でも、早い段階で行き詰まりました。これで問題ないと思っていたのですが、どうやらheaderdivがdivにスナップされているようcontentです。彼らは同じマージンを持っているように見えます。
を削除すれば良さそうposition:fixed;ですが、直してほしいです。
お互いに離れているので、なぜこれが起こるのか本当にわかりません。のようなものを使用するのmargin-top:-100pxは適切ではありません。
これを行うと、醜い解決策なしで機能するはずです...
CSS:
#header {
position:fixed;
width:1200px;
border:1px solid black;
z-index:1;
overflow:hidden;
background-color:white;
}
#menu {
width:100%;
z-index:2;
}
#content {
margin: 100px 0 0 0;
background-color:red;
overflow:hidden;
width:1200px;
z-index: -1;
height:100%;
}
HTML
<div id="header">
<h1>Header</h1>
<div id="menu"><ul>
<li><a href="#works">Works</a></li>
<li><a href="#news">News</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="works" name="works"></div>
<div id="news" name="news"></div>
<div id="about" name="about"></div>
<div id="contact" name="contact"></div>
</div>
<div id="footer"></div>