Question

我们正在创建一个基于<div>的网页设计。我们为标题创建了一个div，为内容创建了一个div，为页脚创建了一个div。我们希望在源代码中，内容div应该首先出现，但在查看时，应该在页面顶部看到标题。

我们如何在CSS中实现这一目标？

Answer 1

设置标题div position为absolute

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.nin
{
width:940px;
margin:auto;
}
.heade
{
background: none repeat scroll 0 0 #E0E0E0;
border-radius: 5px 5px 5px 5px;
height: 50px;
position: absolute;
top: 0;
width: 940px;
}
.heade h1   {  line-height: 0; }
.fod
{
height:50px;
border-radius:5px;
background:#E0E0E0;
}
.mid
{
margin-top:75px;
height:500px;
    background:#FFFFFF;
border-style:solid;
border-radius:5px;
border-width:2px;
}
.left
{
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 2px;
float: left;
height: 343px;
margin-left: 5px;
margin-top: 5px;
width: 450px;
}
.right {
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 2px;
float: right;
height: 125px;
margin-right: 5px;
margin-top: 220px;
width: 461px;
}
.bottom
{
border-radius: 5px 5px 5px 5px;
border-style: dashed;
border-width: 2px;
height: 135px;
margin-left: 2px;
margin-top: 356px;
width: 925px;
}
</style>
</head >
<body>
<div class="nin">

<div class="mid">
<div class="left"> 
    <ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</div>
<div class="right"> 

<p>It is a coontent box one</p>
</div>
<div class="bottom">
<p>It is a content box two</p>
  <a href="http://www.iprofile.net/">Iprofile</a>
</div>
</div>
<div class="heade">
<h1>
<p style="text-align:center">This is header</p>
</h1>
</div>
<div class="fod">
<div>
<h1>
<p style="text-align:center">This is footer</p>
</h1>
</div>
</div>
</div>
</body>
</html>

Answer 2

将padding-top元素上的<body>设置为与标题的高度相同。这会将您的内容<div>向下移动，并为标题留出足够的空间。

如果您的标题没有固定高度（以像素为单位），则可以使用em代替顶部填充，因为如果用户更改其字体大小，这将适应。但是你仍然需要知道标题中的内容是什么，以及它的高度。
将标题<div>设置为position: absolute; top: 0;，将其从正常的布局流程中删除，并将其放置在页面顶部。您可能也想为left设置一个值，但这取决于您的具体布局。

如何将页眉放在页面顶部并按顺序排列内容？

2 个答案: