Html 如何创建单列内容优先布局

我有一个单列固定宽度布局，带有页眉和页脚，我必须按照以下顺序进行查看

标题

航行

基本内容

基本内容

主要内容

页脚

项目3、4和5将是动态的，并垂直扩展（高度未知） 第1、2和6项为固定高度。 我们的SEO经理说，他希望“主要内容”是正文中的第一部分，或者至少在基本内容（源代码视图）之上

---

我已经尝试将主包装（围绕所有6个div）设置为相对位置，然后将“主内容”绝对位置设置为底部。

嘿，你可以像这样轻松地完成这项工作

Css

div{
    background:green;
    margin-top:10px;
    padding:20px;
    color:white;
}

#five-5{
display:none;
}

HTML

<div id="five"></div>
<div id="one">Header</div>
<div id="two">navigation</div>
<div id="three">basic content</div>
<div id="four">basic content</div>
<div id="six">Footer here </div>





<div id="five-5">Main Container here </div>

---

现场演示

@jacktheripper:很明显，他希望自己的主要内容在HTML中排在第一位，但在查看页面时按正确的顺序（列表）显示。当然，但他需要一堂提问的课。实际上，在这个问题上，他说了“给我codez”，而他的问题应该是“使用CSS重新定位页面上的内容”，如果没有看到真正的代码，这是没有帮助的。我不明白为什么人们想在搜索引擎优化方面走那么远。html内容到底显示了多远，这有关系吗？我认为CSS也不是实现这一点的语言。Javascript似乎更合适。我想我实际上应该按照SEO人员想要的顺序来排列这些内容，并在页面加载后使用Javascript来移动内容。用CSS做这件事将是一场噩梦。使用JS也很难看，但是，嘿，绝望的时刻，绝望的度量…

position:absolute

中的

position:relative

是你的工具。

document.getElementById('five').innerHTML=document.getElementById('five-5').innerHTML;