CSS 可以真正覆盖页面上 HTML 元素的顺序吗？答案

【问题标题】：Can CSS truly override the order of HTML elements on a page?CSS 可以真正覆盖页面上 HTML 元素的顺序吗？
【发布时间】：2019-01-31 17:46:25
【问题描述】：

如果您在一个页面上有多个 divs，您可以使用 CSS 来调整大小、浮动它们并稍微移动它们……但我看不出有什么方法可以克服第一个 @ 987654322@ 将显示在页面顶部附近，最后一个 div 将显示在底部附近！我不能完全覆盖来自源 HTML 的元素的顺序，可以吗？

我一定是遗漏了一些东西，因为人们说“我们可以通过编辑一个 CSS 文件来改变整个网站的外观。”但这取决于你是否仍然希望 divs 以相同的顺序！

（附注：我确信没有人在页面上的每个元素上都使用position:absolute。）

【问题讨论】：

Css 是风格，html 是设计+风格。元素的顺序通常是一项设计任务，而不是样式任务。但是：自适应设计可能会打破这个规则。
@PeterRader HTML 用于结构。称其为设计具有误导性。设计包括结构、风格和行为。这分别由 HTML、CSS 和 JavaScript 处理。
感谢您的回答。是的，它的小行为和误导。

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

使用浮动和绝对位置，您可以使用一些非常好的定位魔法来更改页面的某些顺序。

例如，使用 StackOverflow，如果标记设置正确，标题和主体内容可能是标记中的前 2 项内容，然后是导航/搜索，最后是右侧边栏。这可以通过一个内容容器来完成，该容器的上边距足以容纳导航，右边距足够大以容纳侧边栏。然后两者都可以绝对定位。标记可能如下所示：

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>

这里重要的是，标记必须牢记这种定位魔法。

改变一些东西，使导航栏在左侧，而导航下方的侧边栏太硬了。

【讨论】：

【解决方案3】：

您可能想查看CSS Zen Garden，了解如何做您想做的事的优秀示例。通过右侧的链接查看大量示例布局，以查看使用严格的 CSS 移动所有内容的各种方式。

【讨论】：

【解决方案4】：

今天有几种方法可以做到这一点。第一个适用于更多浏览器，但受到更多限制：

使用 CSS 显示值 table-caption、table-row 和 table-cell 允许最多三个由 CSS 专门控制的元素进行垂直排序。
这是较新的，仅适用于所有最新的浏览器（是的，在 IE9 中会失败）：使用 flexbox CSS 属性。

您可以在“this is responsive”模式页面查看实时示例并详细了解这些技术。我正在谈论的两个在标题为“Source-Order Shift”的部分中

【讨论】：

【解决方案5】：

你不需要 position:absolute 在每个元素上做你想做的事。

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

【讨论】：

【解决方案6】：

我认为最重要的因素是以语义上有意义的方式放置您的 html 元素，幸运的是，您的 CSS 布局不必做太多工作。例如，您网站的页眉可能是页面上的第一个元素，然后是普通导航，然后是子导航、内容和页脚（不完整列表）。

大约 90-95% 的您想要使用的布局应该相对容易将标记操作成您所追求的东西。剩下的 5-10% 仍然是可能的，但需要更多的努力，但您需要问自己的问题是“我希望我的网站标题多久位于页面的右下角？”

我一直发现，如果您确实想要显着改变外观和感觉，至少与从头开始的重新编码相比，网站的布局并不是很难在事后进行操作。

2c>

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

关于页眉总是在前，页脚在后的好处！但我可能想将我的广告 DIV 从顶部移到右侧。

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

【讨论】：

除了 google 对页面的看法之外，将您的内容放在首位也不是一个坏主意。它会先加载，而且屏幕阅读器会先点击它，这显然有利于可访问性。