我无法将容器放在我的标题上，这是我想要的例子：http://athena.fhict.nl/users/i315041/metrieken/
但无论我尝试什么，都会发生奇怪的事情，比如NAV正在消失或者div正在进行中。
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Metrieken</title>
<meta name="keywords" content="ICT, Projecten, Consultancy" />
<meta name="description" content="Uw software projecten in control." />
<link href="http://fonts.googleapis.com/css?family=Varela" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>
<a href="#"><img src="css/img/Logo-PMS.png" width="300px"></a>
</h1>
</div>
<div id="menu">
<ul>
<li class="current_page_item">
<a href="#" accesskey="1" title="">Diensten</a>
</li>
<li>
<a href="#" accesskey="2" title="">Toepassingen</a>
</li>
<li>
<a href="#" accesskey="3" title="">Dashboard</a>
</li>
<li>
<a href="#" accesskey="4" title="">Publicaties</a>
</li>
<li>
<a href="#" accesskey="5" title="">Nieuws</a>
</li>
<li>
<a href="#" accesskey="6" title="">Over ons</a>
</li>
<li>
<a href="#" accesskey="7" title="">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div id="banner">
<div class="title">
<h2>Uw software projecten in control.</h2>
<span class="byline">Voor al uw ICT-projecten</span>
</div>
</div>
<div id="extra" class="container">
<div id="tab">
<p>Diensten</p>
</div>
<div id="content">
<div class="title">
<h2>Vanaf nu kunt u kosten besparen op software ontwikkeling</h2>
</div>
<p>U vindt bij ons een compleet aanbod aan dienstverlening en toepassingen van software metrieken waarmee u kosten kunt besparen
op uw software ontwikkeling. Wij ondersteunen u met sizing / FPA en begroting en planning van software projecten. Ook helpen
wij u bij de inkoop van software door offertes voor software-ontwikkeling te beoordelen. Voor al onze vormen van dienstverlening
hanteren wij scherpe tarieven. Onderstaand schema geeft een overzicht van ons dienstenpakket.</p>
<img src="css/img/schema-homepage-5.jpg"
width="100%">
</div>
<div id="content">
<div class="title">
<h2>Kortom: U heeft uw software projecten in control!</h2>
</div>
<p>Metrieken.nl bestaat uit ervaren specialisten op het gebied van software metrieken: senior sizing analisten en senior consultants.
Wij werken voor uiteenlopende sectoren vanuit meerdere plaatsen in het land. Metrieken.nl ondersteunt bedrijven bij hun software
projecten met functiepuntanalyses en begroten en plannen van deze projecten. Daarmee kunnen onze klanten zich met een gerust
hart richten op hun primaire business, want de software projecten zijn in control. Openheid, transparantie en respect Metrieken.nl
vindt het belangrijk dat klanten tevreden zijn, niet alleen over de kwaliteit, maar ook over de prijs-kwaliteit verhouding
van onze dienstverlening en de mentaliteit van onze mensen. Openheid, transparantie en wederzijds respect zijn daarbij onze
kernwaardes.
<br>
<br>Ervaren en onafhankelijk:
<br>-gecertificeerde senior sizing analysts en senior consultants
<br>-ruime ervaring bij uiteenlopende sectoren
<br>-landelijk de meeste ervaring in huis
<br>-geen softwareleverancier, dus onafhankelijk.
<br>
</p>
</div>
<div id="three-column">
<div class="boxA">
<div class="box">
<p>Parlementair onderzoek naar ICT-projecten bij de overheid.</p>
<img src="css/img/noun_22592_cc.png" width="100%;">
<p>Met het ICT-dashboard meer grip op uw projecten.</p>
</div>
</div>
<div class="boxB">
<div class="box">
<p>Bekijk onze bedrijfs-presentatie</p>
<img src="css/img/noun_3059_cc.png" width="100%;">
<img src="css/img/noun_1541.png" width="20%;">
</div>
</div>
<div class="boxC">
<div class="box">
<p>Beste prijs/kwaliteit verhouding</p>
<img src="css/img/noun_30373_cc.png" width="100%;">
<p>Gecertificeerde en ervaren consultants én 25% onder de marktprijs</p>
</div>
</div>
</div>
</div>
<div id="page" class="container"></div>
</div>
<div id="copyright" class="container">
<div id="four-column">
<div class="box1">
<p>Diensten:
<br>-Early sizing
<br>-Sizing / FPA
<br>-Estimating
<br>-Monitoring
<br>-Benchmarking
<br>-Resource planning
<br>
</p>
</div>
<div class="box2">
<p>Toepassingen:
<br>-Agile
<br>-Project planning
<br>-Beheer
<br>-Inkoop van software
<br>-Leverancier / offerte
<br>
</p>
</div>
<div class="box3">
<p>Toepassingen:
<br>-Agile
<br>-Project planning
<br>-Beheer
<br>-Inkoop van software
<br>-Leverancier / offerte
<br>
</p>
</div>
<div class="box4">
<p>Toepassingen:
<br>-Agile
<br>-Project planning
<br>-Beheer
<br>-Inkoop van software
<br>-Leverancier / offerte
<br>
</p>
</div>
</div>
<p>© Untitled. All rights reserved. | Photos by
<a href="http://fotogrph.com/">Fotogrph</a>| Design by
<a href="http://templated.co" rel="nofollow">TEMPLATED</a>.</p>
</div>
</body>
</html>
CSS：
html, body
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
background: #333333;
font-family: 'Varela', sans-serif;
font-size: 11pt;
font-weight: 300;
color: #656565;
}
h1, h2, h3
{
margin: 0;
padding: 0;
font-weight: 700;
color: #2B3F48;
}
p, ol, ul
{
margin-top: 0;
}
ol, ul
{
padding: 0;
list-style: none;
}
ul.actions
{
text-align: center;
}
ul.actions li
{
}
p
{
line-height: 180%;
}
strong
{
}
a
{
color: #0000FF;
}
a:hover
{
text-decoration: none;
}
.container
{
overflow: hidden;
width: 1064px;
margin: 0em au
}
#content {
overflow:hidden;
border-radius: 5px;
-webkit-box-shadow: rgb(150, 150, 150) 0px 2px 3px 0px;
box-shadow: rgb(150, 150, 150) 0px 2px 3px 0px;
background-color: #fff;
padding: 2em;
}
#tab {
border-radius: 5px 5px 0px 0px;
background-color: #fff;
overflow: hidden;
width: 15%;
float: none;
margin: auto;
-webkit-box-shadow: rgb(150, 150, 150) 0px 2px 3px 0px;
box-shadow: rgb(150, 150, 150) 0px 2px 3px 0px;
}
#tab p {
color: red;
padding: 0.75em;
text-align: center;
margin: 0px;
}
/*********************************************************************************/
/* Image Style */
/*********************************************************************************/
.image
{
display: inline-block;
}
.image img
{
display: block;
width: 100%;
}
.image-full
{
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image-left
{
float: left;
margin: 0 2em 2em 0;
}
.image-centered
{
display: block;
margin: 0 0 2em 0;
}
.image-centered img
{
margin: 0 auto;
width: auto;
}
/*********************************************************************************/
/* List Styles */
/*********************************************************************************/
ul.staff
{
margin-bottom: 3em;
}
ul.staff li
{
display: inline-block;
}
ul.staff li img
{
width: 80%;
border-radius: 50%;
}
/*********************************************************************************/
/* Social Icon Styles */
/*********************************************************************************/
ul.contact
{
margin: 0;
padding: 2em 0em 0em 0em;
list-style: none;
}
ul.contact li
{
display: inline-block;
padding: 0em 0.30em;
font-size: 1em;
}
ul.contact li span
{
display: none;
margin: 0;
padding: 0;
}
ul.contact li a
{
color: #FFF;
}
ul.contact li a:before
{
display: inline-block;
background: #3f3f3f;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
text-align: center;
color: #FFFFFF;
}
ul.contact li a.icon-twitter:before { background: #2DAAE4; }
ul.contact li a.icon-facebook:before { background: #39599F; }
ul.contact li a.icon-dribbble:before { background: #C4376B; }
ul.contact li a.icon-tumblr:before { background: #31516A; }
ul.contact li a.icon-rss:before { background: #F2600B; }
/*********************************************************************************/
/* Button Style */
/*********************************************************************************/
.button
{
display: inline-block;
padding: 0em 3em;
background: #009E2D;
letter-spacing: 0.20em;
line-height: 4em;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 1em;
color: #FFF;
}
.button:before
{
display: inline-block;
background: #FFC31F;
margin-right: 1em;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
text-align: center;
color: #272925;
}
/*********************************************************************************/
/* Heading Titles */
/*********************************************************************************/
.title
{
margin-bottom: 3em;
}
.title h2
{
text-transform: uppercase;
font-size: 2.7em;
}
.title .byline
{
font-size: 1.7em;
color: #6F6F6F;
}
/*********************************************************************************/
/* 4-column */
/*********************************************************************************/
.box1,
.box2,
.box3,
.box4
{
width: 235px;
}
.box1,
.box2,
.box3,
{
float: left;
margin-right: 20px;
}
.box4
{
float: right;
}
/*********************************************************************************/
/* 3-column */
/*********************************************************************************/
#three-column {
margin-top: 2em;
border-radius: 5px;
background-color: #DC0714;
overflow: hidden;
-webkit-box-shadow: rgb(150, 150, 150) 0px 2px 3px 0px;
box-shadow: rgb(150, 150, 150) 0px 2px 3px 0px;
}
.boxA,
.boxB,
.boxC
{
width: 340px;
}
.boxA,
.boxB
{
float: left;
margin-right: 22px;
}
.boxC
{
float: right;
}
/*********************************************************************************/
/* 2-column */
/*********************************************************************************/
.tbox1,
.tbox2
{
width: 575px;
}
.tbox1
{
float: left;
}
.tbox2
{
float: right;
}
#wrapper
{
background: #F5F5F5;
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header-wrapper
{
background: #fff;
}
#header
{
position: relative;
padding: 3em 0em;
}
/*********************************************************************************/
/* Logo */
/*********************************************************************************/
#logo
{
position: absolute;
top: 1em;
left: 0;
}
#logo h1
{
color: #FFF;
}
#logo a
{
text-decoration: none;
text-transform: uppercase;
color: #FFF;
}
/*********************************************************************************/
/* Menu */
/*********************************************************************************/
#menu
{
position: absolute;
top: 2em;
right: 0;
}
#menu ul
{
display: inline-block;
}
#menu li
{
display: block;
float: left;
text-align: center;
}
#menu li a, #menu li span
{
padding: 1em 1.5em;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 0.8em;
color: black;
}
#menu li:hover a, #menu li.active a, #menu li.active span
{
color: #E5543A;
}
#menu .current_page_item a
{
color: #DC0714;
}
#menu .icon
{
}
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
overflow: hidden;
padding: 20em 0em 20em 0em;
background-image: url(img/test.png);
background-size: cover;
text-align: center;
color: rgba(255,255,255,.8);
}
#banner .title
{
margin-bottom: 1em;
text-transform: uppercase !important;
}
#banner .title h2
{
color: #FFF;
}
#banner .title .byline
{
color: rgba(255,255,255,.6);
}
#banner .button
{
margin-top: 3em;
background: #009E2D !important;
}
/*********************************************************************************/
/* Page */
/*********************************************************************************/
#page
{
padding: 5em 0em;
text-align: center;
}
#page .button
{
margin-top: 2em;
display: inline-block;
text-align: center;
}
/*********************************************************************************/
/* Content */
/*********************************************************************************/
#content
{
}
/*********************************************************************************/
/* Sidebar */
/*********************************************************************************/
#sidebar
{
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer
{
}
/*********************************************************************************/
/* Copyright */
/*********************************************************************************/
#copyright
{
overflow: hidden;
padding: 5em 0em;
border-top: 1px solid rgba(255,255,255,0.08);
}
#copyright p
{
text-align: center;
font-size: 1em;
color: rgba(255,255,255,0.5);
}
#copyright a
{
text-decoration: none;
color: rgba(255,255,255,0.8);
}
/*********************************************************************************/
/* Featured */
/*********************************************************************************/
#featured
{
overflow: hidden;
padding: 5em 0em;
background: #009E2D;
color: rgba(255,255,255,.8);
text-align: center;
}
#featured a
{
color: rgba(255,255,255,1);
}
#featured .button
{
background: #FFF;
margin-top: 3em;
font-size: 1em;
color: #009E2D;
}
#featured .title
{
}
#featured .title h2
{
color: #FFF;
}
#featured .title .byline
{
color: rgba(255,255,255,.6);
}
/*********************************************************************************/
/* Featured */
/*********************************************************************************/
.box
{
border-radius: 5px;
margin: 3em 2em 2em 2em;
text-align: center;
background-color: #E5543A;
padding: 1em;
}
.box p {
color: #f5f5f5;
}
#extra
{
overflow: hidden;
padding: 5em 0em;
}
#extra .title
{
text-align: center;
}
#extra .button
{
margin-top: 5em;
}
#extra .fa
{
display: block;
margin-bottom: 0.5em;
text-align: center;
font-size: 3em;
}
答案 0 :(得分：2)
开平！ 这可以帮到你：
#header-wrapper{position:fixed}