Question

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

<!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; }

Answer 1

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

Answer 2

如果您想保留标题的固定位置，则需要将margin-top应用于正文以补偿它。

对于标题的固定位置，您实际上并不需要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;      
}

HTML5 <header> <nav>重叠正文</nav> </header>

2 个答案: