23

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

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

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

4

8 回答 8

37

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

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

于 2008-09-18T12:57:05.813 回答
9

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

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

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

更改内容以使导航栏位于左侧，而导航下方的侧边栏太难了。

于 2008-09-18T13:07:06.977 回答
3

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

于 2008-09-18T12:57:50.167 回答
3

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

  1. 使用 的 CSS 显示值table-caption，table-row并table-cell允许最多三个由 CSS 专门控制的元素进行垂直排序。

  2. 这是较新的，仅适用于所有最新的浏览器（是的，它在 IE9 中会失败）：使用 flexbox CSS 属性。

您可以在“这是响应式”模式页面查看实时示例并阅读有关这些技术的更多信息。我正在谈论的两个在标题为“Source-Order Shift”的部分中

于 2012-11-10T22:16:24.153 回答
2

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

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

于 2008-09-18T12:56:01.043 回答
1

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

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

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

</2c>

于 2008-09-18T13:01:30.127 回答
1

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

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

于 2008-09-18T13:11:33.847 回答
0

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

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

于 2008-09-18T13:05:41.940 回答