CSS是否真的能够在页面上覆盖HTML元素的顺序？

Question

如果页面上有多个div，您可以使用CSS对它们进行大小设置、浮动和微调...但是我无法摆脱第一个div会显示在页面顶部而最后一个div会显示在底部的事实！由于元素按照源HTML的顺序排列，因此我无法完全覆盖元素的顺序，您能做到吗？ 我一定是忽略了什么，因为有人说“我们只需编辑一个CSS文件就可以改变整个网站的外观”，但这取决于您仍然希望将div放在相同的顺序中！ （附注：我确定没有人在页面上每个元素上都使用position:absolute。）

- Magnus Smith

---

Css 是样式，HTML 是设计加样式。元素顺序通常是一个设计任务，而不是样式任务。但是：自适应设计可能会打破这个规则。 - Grim

@PeterRader HTML是用于结构的，称其为设计是误导的。设计包括结构、样式和行为。这分别由HTML、CSS和JavaScript处理。 - spex

谢谢你的回答。是的，它有点不合适和误导性。 - Grim

Answer 1

CSS可以将元素从正常流程中移除并按任何方式在任何位置定位。 但它不能创建新的流程。

我的意思是，您可以将html文档中的最后一个项目定位在页面/窗口的开头/顶部，并将html文档中的第一个项目定位在页面/窗口的结尾/底部。 但是当您这样做时，无法相对于彼此定位这些项目； 您必须自己知道页面末尾距离多远，才能正确地定位来自html文档的第一个项目。如果该内容是动态的（即来自数据库或CMS），则这可能不容易。

- Joel Coehoorn

Answer 2

使用浮动和绝对定位，您可以进行一些很好的定位魔术来更改页面的某些顺序。

例如，在 StackOverflow 上，如果标记设置正确，则标题和主体内容可以成为标记中的前两个元素，然后是导航/搜索，最后是右侧边栏。这可以通过具有足够大的顶部外边距以容纳导航和足够大的右侧外边距以容纳侧边栏的内容容器来实现。然后，两者都可以被绝对定位在其位置上。标记可能如下所示：

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

<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> New Zelands fish market </h4>
    ....
  </div>
</div>

重要的是，必须考虑到这种定位魔法来进行标记。

将导航栏放在左侧，边栏放在导航下方可能会很困难。

- Jonathan Arkell

Answer 3

您可能想看看CSS Zen Garden，这是一个很好的例子，展示了如何做您想要的事情。通过右侧链接提供了大量的示例布局，可以查看使用纯CSS移动所有内容的各种方式。

- Nick Craver

Answer 4

今天有几种方法可以实现这个功能。第一种适用于更多的浏览器，但是功能较为有限：

1. 使用CSS display属性的table-caption、table-row和table-cell值允许在仅通过CSS控制的情况下垂直排序最多三个元素。

2. 这是更近期的方法，只能在所有最新的浏览器中使用（是的，在IE9中会失败）：使用flexbox CSS属性。

您可以在“this is responsive”模式页面上查看实时示例并了解更多有关这些技术的信息。我所说的两种方法位于“源顺序转换”部分。

- pieroxy

Answer 5

您不需要在每个元素上使用position:absolute来实现您想要的效果。

您只需在一些关键项目上使用它，然后您可以将它们定位在任何位置，同时移动包含在其中的所有项目以及该部分的根元素。

- workmad3

Answer 6

我认为最重要的因素是语义化地放置你的HTML元素，幸运的是，你在CSS中的布局不需要太多的工作。例如，你网站的标题可能是页面上的第一个元素，接着是常见导航、子导航、内容和页脚（不完全列表）。

你想要处理的90-95%的布局可能相对容易将标记转化为你想要的东西。其他5-10%的布局可能需要更多的努力，但你需要问自己的问题是“我有多频繁地想要将我的网站标题定位在页面的右下角？”

我始终发现，在事后改变外观和感觉时，网站的布局并不太难处理，至少与从头开始编写代码相比不算什么。

</ 2c>

- ZombieSheep

Answer 7

使用position:absolute，您可以完全独立于源顺序定位单个框。因此，您可以使用CSS将标题移动到页面底部，将页脚移动到页面顶部。

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

- olavk

Answer 8

关于头部总是在首位，底部总是在最后的观点非常好！但是我可能想把我的广告DIV从顶部移到右边。

我听说的另一件事是将内容DIV放在首位，这样Google会更关注你（靠近页面顶部的相关关键字得分更高）...或者这只是一个神话？做到这一点也需要我所询问的CSS技巧。

- Magnus Smith

---

除了 Google 如何看待页面之外，将您的内容放在首位也不失为一个好主意。这样它将会首先加载，屏幕阅读器也会首先遇到它，这显然有利于辅助功能。 - nickf