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

如果你在页面上有几个div，你可以使用CSS来调整大小，将它们浮动并移动一些…但是我看不到一种方式可以超越第一个div将显示在顶部附近的事实页面和最后一个div将接近底部！我不能完全覆盖元素的顺序，因为它们来自源HTML，可以吗？

我必须错过一些东西，因为人们说“我们可以通过编辑一个CSS文件来改变整个网站的外观”，但这取决于你仍然希望div按照同样的顺序！

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

解决方法

随着浮动，和位置绝对，你可以拉一些很好的定位魔法来改变页面的一些顺序。

例如，使用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; }

这里重要的一点是，必须要考虑到这种定位魔法的标记。

改变事情，使导航栏在左侧，导航栏下方的侧边栏太难了。