0

我是 HTML5 的新手，我似乎无法解决这个问题。您可以从下图中看到标题与内容区域重叠。我怎样才能解决这个问题？是我的标题 css 的问题吗？

http://imgur.com/pJn4i

<!DOCTYPE HTML>
<html>

<head>

<meta charset="UTF-8" />
<link href='http://fonts.googleapis.com/css?     family=Open+Sans:300italic,600italic,600,300' rel='stylesheet' type='text/css'> 


<!--Stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->   

<!--HTML5 video player-->
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

</head> 

<body>

<header>

    <div id="headercontainer">

        <h1><a class="introlink anchorLink" href="#intro">Test Site</a></h1>

        <nav> 
            <ul>
                <li><a class="introlink anchorLink" href="#intro">Intro</a>   </li>
                <li><a class="portfoliolink anchorLink"  href="#portfolio">Portfolio</a></li>
                <li><a class="aboutlink anchorLink" href="#about">About</a> </li>
                <li><a class="contactlink anchorLink" href="#contact">Contact</a></li>
            </ul>               
        </nav>

    </div>

</header> 


<div id="content">
<article>
<section>

    <h1 class="article"> Lorem ipsum</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor        incididunt ut labore et dolore magna aliqua. 
    </section>

这是相应的CSS：

body{
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: small;
background-image:url('Media\background.jpg');
background-repeat:repeat-y;
padding-top::50px;      
   }

header { padding: 5px 0; width: 100%; background-color: #000; margin-bottom: 25px; 
position: fixed; z-index: 10; float: left; }
#headercontainer, #contentcontainer { width: 960px; 
margin: 0 auto; position: relative; }
4

2 回答 2

2

position: fixed;从标题 CSS 中删除。

于 2012-09-18T14:21:27.313 回答
2

如果你想保留header的固定位置，那么你需要应用margin-top到body来补偿它。

此外，您实际上不需要标题的固定位置margin-bottom。

body {
    margin: 25px 0 0 0; /* considering that the header is 25px */
    font-family: 'Open Sans', sans-serif;
    font-size: small;
    background-image:url('Media\background.jpg');
    background-repeat:repeat-y;
    padding-top: 50px;      
}
于 2012-09-18T14:24:48.540 回答