如果页面上有多个div，则可以使用CSS来调整大小，浮动它们并将它们稍微移动一下...但是我看不到一种方法可以克服第一个div将在页面顶部附近显示，最后一个div在底部附近！我不能完全覆盖元素的顺序，因为它们来自源HTML，可以吗？

我一定错过了一些东西，因为人们说"我们可以通过编辑一个CSS文件来改变整个网站的外观。"但是那取决于我们仍然希望按相同的顺序使用div！

(P.S.我确定没有人会在页面上的每个元素上使用position：absolute。)

解决方案

我们不需要position：absolute在每个元素上都可以做我们想要的事情。

我们只需要在几个关键项目上使用它，然后就可以将它们放置在所需的任何位置，将其中包含的所有项目连同该节的根元素一起移动。

CSS可以从正常流程中删除元素，并以我们想要的任何方式将它们放置在任何地方。但是它不能创建新的流程。

我的意思是，我们可以将html文档中的最后一项放置在页面/窗口的开头/顶部，并将html文档中的第一项放置在页面/窗口的结尾/底部。但是，当我们执行此操作时，就无法将这些项目彼此相对放置。我们必须自己了解html文档中第一个项目要正确放置在页面末尾的距离。如果该内容是动态的(即：来自数据库或者CMS)，则可能并非无关紧要。

我们可能需要查看CSS Zen Garden，以获得有关如何做自己想要的事的出色示例。通过右侧的链接可以找到大量示例布局，以查看使用严格CSS移动所有内容的各种方式。

我认为最重要的因素是将html元素以一种在语义上有意义的方式放置，而且幸运的是，我们在CSS中的布局不必做太多的工作。例如，我们网站的标题可能是页面上的第一个元素，然后是通用导航，然后是子导航，内容和页脚(不完整的列表)。

我们可能要使用的布局中大约90-95％应该相对琐碎，以将标记处理为我们想要的布局。其他5-10％仍然可以实现，但需要付出更多的努力，但是我们需要问自己的问题是："我多久希望网站标题位于页面右下角？

我总是发现，如果确实要显着改变外观，至少与完全重新编码相比，网站的布局就很难操作。

</ 2c>

关于页眉始终是第一，页脚最后是好的一点！但是我可能想将广告DIV从顶部移到右侧。

我听说过的另一件事是将内容DIV放在第一位，因此Google会给我们更多的关注(页面顶部附近的相关关键字得分更高)...或者这是神话吗？这样做也需要我正在询问的CSS技巧。

使用浮动和绝对位置时，我们可以拉一些不错的定位魔术来更改页面的某些顺序。

例如，对于StackOverflow，如果正确设置了标记，则标题和主体内容可能是标记中的前两件事，然后是导航/搜索，最后是右侧边栏。这可以通过使内容容器的顶部边缘足够大以容纳导航，而右侧边缘足够大以容纳侧栏来完成。然后，两个都可以绝对定位到位。标记可能如下所示：

<h1> Stack Overflow </h1>
<div id="content">
  <h2> Can Css truly blah blah? </h2>
  ...
</div>
<div id="nav">
  <ul class="main"><li>quiestions</li> ... </ul>
  ....
</div>
<div id="side">
  <div class="box">
    <h3> Sponsored By </h3>
    <h4> Lew Zelands fish market </h4>
    ....
  </div>
</div>

和CSS一样

h1 { position: absolute; top: 0; left: 0; }
#content { margin-top: 100px; margin-right: 250px; }
#nav { position: absolute; top: 0; left: 300px; }
#side { position: absolute; right: 0; top: 100px; }

这里重要的是标记必须在考虑到这种定位魔术的情况下完成。

更改内容以使导航栏位于左侧，而导航栏下方的侧栏太难了。

我们可以使用position：absolute定位完全独立于源订单的单个包装盒。因此，我们可以使用CSS将页眉移至页面底部，将页脚移至顶部。

但是请注意，这通常对可访问性不利：我们应该使内容在源中的顺序或者多或者少与我们向读者呈现内容的顺序相同。原因是屏幕阅读器或者类似设备将按照源中定义的顺序显示内容，而不是CSS定义的视觉顺序。