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

Question

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

我必须遗漏一些东西,因为人们说"我们可以通过编辑一个CSS文件来改变整个网站的外观."但这取决于你仍然希望divs以相同的顺序!

(PS我相信没有人使用position:absolute页面上的每个元素.)

Answer 1

CSS可以将元素从正常流中取出,并以任何方式将它们放置在任何位置.但它无法创造新的流程.

我的意思是你可以在页面/窗口的开头/顶部放置html文档中的最后一项,并且可以在页面/窗口的结尾/底部放置html文档中的第一项.但是当你这样做时,你无法将这些物品相对于彼此定位; 您必须自己知道页面末尾将从html文档中的第一个项目正确定位的距离.如果该内容是动态的(即:来自数据库或CMS),这可能远非微不足道.

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>

这里重要的是标记必须考虑到这种定位魔法.

更改东西,使导航栏位于左侧,导航栏下方的侧边栏太硬.