提问人：Magnus Smith 提问时间：9/18/2008 最后编辑：Ulf GjerdingenMagnus Smith 更新时间：1/31/2019 访问量：15049
CSS 真的可以覆盖页面上 HTML 元素的顺序吗？
Can CSS truly override the order of HTML elements on a page?
问：
如果你的页面上有几个，你可以使用CSS来调整它们的大小，浮动它们并移动它们......但我看不出有什么方法可以克服这样一个事实，即第一个将显示在页面顶部附近，最后一个将显示在底部附近！我不能完全覆盖元素的顺序，因为它们来自源 HTML，对吗？divdivdiv
我一定遗漏了一些东西，因为人们说“我们可以通过编辑一个CSS文件来改变整个网站的外观”，但这取决于你是否仍然希望s以相同的顺序排列！div
（附言我敢肯定没有人在页面上的每个元素上使用。position:absolute
答：
2赞
workmad3
9/18/2008
#1
你不需要在每个元素上都使用 position：absolute 来做你想做的事。
您只需在几个关键项目上使用它，然后您可以将它们放置在您想要的任何位置，将其中包含的所有项目与该部分的根元素一起移动。
38赞
Joel Coehoorn
9/18/2008
#2
CSS 可以将元素从正常流程中取出，并以您想要的任何方式将它们放置在任何位置。但它不能创建新的流。
我的意思是您可以将 html 文档中的最后一项放置在页面/窗口的开头/顶部，并且可以将 html 文档中的第一项放置在页面/窗口的末尾/底部。但是，当您这样做时，您不能将这些项目彼此相对放置;您必须自己知道 HTML 文档中的第一项要正确定位页面末尾的距离。如果该内容是动态的（即：来自数据库或 CMS），这可能远非微不足道。
3赞
Nick Craver
9/18/2008
#3
你可能想看看CSS Zen Garden，看看如何做你想做的事的优秀例子。通过右侧的链接提供大量示例布局，以查看使用严格 CSS 移动所有内容的各种方法。
1赞
ZombieSheep
9/18/2008
#4
我认为最重要的因素是以语义上有意义的方式放置您的 html 元素，幸运的是，您在 CSS 中的布局将不必做太多工作。例如，您网站的页眉可能是页面上的第一个元素，然后是通用导航，然后是子导航、内容和页脚（不完整列表）。
可能大约 90-95% 的你想要使用的布局应该是相对简单的，可以将该标记操作成你所追求的东西。另外 5-10% 仍然是可能的，但需要付出更多的努力，但您需要问自己的问题是“我可能希望我的网站标题位于页面右下角的频率是多少？
我一直发现，如果你确实想大幅改变外观和感觉，那么网站的布局在事后并不难操纵，至少与从头开始的重新编码相比是这样。
</2C>
0赞
Magnus Smith
9/18/2008
#5
关于页眉总是在前面，页脚在最后的好点！但我可能想将我的广告 DIV 从顶部移动到右侧。
我听说过的另一件事是将内容 DIV 放在首位，这样 Google 就会更加关注您（页面顶部附近的相关关键字得分更高）......还是这是一个神话？这样做也需要我正在询问的那种CSS技巧。
评论
0赞
nickf
9/18/2008
除了谷歌如何看待页面之外，无论如何，把你的内容放在第一位并不是一个坏主意。它将首先加载，加上屏幕阅读器将首先点击它，这显然有利于可访问性。
9赞
Jonathan Arkell
9/18/2008
#6
使用浮动和绝对位置，您可以提取一些非常好的定位魔术来更改页面的某些顺序。
例如，使用 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>这里重要的是，标记必须牢记这种定位魔术。
更改内容，使导航栏位于左侧，导航栏下方的侧边栏太难。
1赞
JacquesB
9/18/2008
#7
您可以使用 position：absolute 完全独立于源顺序放置单个框。因此，您可以使用 CSS 将页眉移动到页面底部，将页脚移动到顶部。
但请注意，这对可访问性来说是不利的：您应该或多或少地将源中内容的顺序与呈现给读者的顺序相同。原因是屏幕阅读器或类似设备将按照源代码中定义的顺序显示内容，而不是按照 CSS 定义的视觉顺序显示内容。
3赞
pieroxy
11/11/2012
#8
今天有几种方法可以做到这一点。第一个适用于更多浏览器，但更受限制：
使用 CSS 显示值 ，并允许最多对三个仅由 CSS 控制的元素进行垂直排序。
table-captiontable-rowtable-cell这是更新的，仅适用于所有最新的浏览器（是的，它在 IE9 中会失败）：使用 flexbox CSS 属性。
您可以在“这是响应式”模式页面查看实时示例并阅读有关这些技术的更多信息。我说的两个在标题为“源顺序转移”的部分中
评论