position: fixed; でスクロールすると文字が重なる
ソース
HTML
- <body class="fixed-menu-body">
- <div>
- <ul id="fixed-menu">
- <li><a href="#">メニュー1</a></li>
- <li><a href="#">メニュー2</a></li>
- <li><a href="#">メニュー3</a></li>
- </ul>
- <div id="main">ここにコンテンツが入ります。</div>
- </div>
- </body>
CSS
- .fixed-menu-body {margin-top: 0px;}
- #fixed-menu {
- margin: 0px;
- padding: 0px;
- list-style-type: none;
- position: fixed;
- background-color: #FFFFFF;
- }
- #fixed-menu:after {
- content: "";
- clear: both;
- display: block;
- }
- #fixed-menu li {
- width: 110px;
- float: left;
- text-align: center;
- font-size: 20px;
- font-weight: bold;
- }
- #fixed-menu li a {text-decoration: none; color: #000000;}
- #fixed-menu li:hover a {text-decoration: underline;}
- #main {padding-top: 30px; margin: 0px;}
表示例
ソースの解説
CSSの解説
- #fixed-menu {
- margin: 0px;
- padding: 0px;
- list-style-type: none;
- position: fixed;
- background-color: #FFFFFF;
- }
メニューのulタグ（ulタグの中のliタグでも可）に background-color を指定します。指定がない場合は背景は透明となるため、スクロールした際にコンテンツの文字や画像がメニューと重なります。
#main {padding-top: 30px; margin: 0px;}
メニューの下に来るコンテンツを入れるブロックに padding-top を指定します。指定しない場合、メニューとコンテンツ部分が重なってしまいます。そのため、メニューの高さよりも大きな値を指定する必要があります。また、margin: 0px; を指定します。これを指定しておかないと、ブロック main の中に margin を指定したブロックを入れると、メニューの上部に隙間ができてしまいます。
.fixed-menu-body {margin-top: 0px;}
body タグに margin-top: 0px; を指定します。これを指定しないとスクロールした際にメニューの上とページの上部との間に隙間ができて文字が見えてしまいます。