CSS真的能覆盖页面上HTML元素的顺序吗?

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

例如,对于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>

这里重要的一点是,标记必须以这种定位的魔力来完成。

改变东西,使导航条在左边,导航条下面的边栏太难了。

CSS可以接受元素 超出正常流量 把它们放在任何你想放的地方。但它不能 创建新流程 .

我的意思是,您可以将HTML文档中的最后一项放在页面/窗口的开头/顶部,并且可以将HTML文档中的第一项放在页面/窗口的结尾/底部。但是,当您这样做时,您不能相对地定位这些项;您必须自己知道页面的末尾有多远,才能正确定位HTML文档中的第一个项。如果该内容是动态的(即:来自数据库或CMS),那么这可能远不是简单的。

你可能想看看 CSS Zen Garden 关于如何做你想做的事情的很好的例子。大量的示例布局通过右边的链接来查看使用严格的CSS移动所有内容的各种方式。

今天有几种方法可以做到。第一个可以在更多的浏览器上工作,但更为有限:

1. 使用的CSS显示值 table-caption , table-row 和 table-cell 允许垂直排序最多三个元素,仅由CSS控制。

2. 这是最近的版本,只能在所有最新的浏览器中使用(是的,它在IE9中会失败):使用flexbox css属性。

您可以查看实时示例,并在 this is responsive “模式页。我要说的两个在标题为“源订单转移”的部分中

你不需要位置:绝对在每一个元素上做你想做的。

您只需在一些关键项上使用它,然后您就可以将它们放在任何需要的位置,移动它们中包含的所有项以及部分的根元素。

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

可能要使用的布局中90-95%的布局相对来说应该比较简单,可以将该标记处理成您需要的内容。其他的5-10%仍然是可能的,只要再多做一点努力,但你需要问自己的问题是“我希望我的网站标题多长时间定位在页面右下角?”

我一直发现,如果你真的想大幅度改变网站的外观和感觉,至少与地面重新编码相比,网站的布局并不难操作。

</2C & GT;

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

然而,请注意,这对于可访问性是非常糟糕的:您应该或多或少地按照将内容呈现给读者的相同顺序对源中的内容进行排序。原因是屏幕阅读器或类似设备将按照源代码中定义的顺序呈现内容,而不是按照CSS定义的视觉顺序。

标题总是在第一位,页脚总是在最后!但我可能想把我的广告部门从顶部移到右边。

我听说的另一件事是把内容DIV放在第一位,所以谷歌会更加关注你(页面顶部附近的相关关键字得分更高)…或者这是一个神话?要做到这一点,就需要我也在问的那种CSS技巧。