你会如何向人类解释 CSS 定位？答案

【问题标题】：How would you explain CSS positioning to a human being?你会如何向人类解释 CSS 定位？
【发布时间】：2013-01-10 14:54:53
【问题描述】：

地球人。

本人身心比较健全，特此放弃自己理解CSS定位。

有关 CSS 的在线资源详细说明了“颜色”属性可让您设置内容的“颜色”。非莫格利什。

然后，如果你想把一些东西放在其他东西的左边（疯狂的想法，对吧？），所有你要做的就是将它设置为浮动到左边，只要你设置其父块上的“相对”标志必须有一个“绝对”标志设置为 true 的祖父节点，以便它相对于可能包含或不包含任何内容的其他容器定位，有一个位置，a大小，取决于浏览器，其他东西的大小，可能还有月相。（建议 CSS 专家不要认真对待上一段。我很确定有人会指出我的咆哮无效或不符合 w3c 标准——而且它仅适用于瑞典语 beta 版的 IE6）

除了开玩笑，我正在寻找任何资源来解释 CSS 布局背后所有疯狂的根本原因。本质上，Crockford 的文章之于 Javascript 对 CSS 的影响。

本着这种精神，让我指出，我不是在寻找 css 库或像 blueprint 这样的网格框架，也不是在寻找像 lesscss 这样的 CSS 扩展语言。我一直在用这些来减轻我的痛苦，但是当他们说他们无法将注意力集中在 JS 中的原型继承上时，我担心这就像告诉某人“只使用 jQuery”。

如果你能指点我的只是http://shop.oreilly.com/product/9781565926226.do，我想我会认为自己注定要失败。

提前致谢。

编辑：我可能不应该谈论“定位”（感谢所有再次解释“位置：相对”并不意味着“相对于您的容器”并且“位置：绝对”意味着相对于某物.我从来没有如此接近于从一个 SO 问题中制作一个 monty python 脚本）。我想我的意思是一般的布局（定位+浮动+基线+将东西放在一条直线上所需的所有废话）。

还请原谅我咆哮的语气，我试图在沮丧中注入一些幽默。如果可以的话，我会用禅的技巧来平静下来，但这只会让我想起 this.

【问题讨论】：

阅读the CSS 2.1 spec（第9章）。掌握一些东西需要时间。你尝试了多久？
我感受到了你的痛苦。我们将使用数十年的另一个蛋头规范:)
It's all about the content 和 the specification 告诉您一切应该如何工作。
@ŠimeVidas 我说的是“人类”，这不应该隐含地排除 w3c 编写的任何内容；）？
@phtrivier CSS 规范在这里是个例外。它包含大量图像和代码示例，易于阅读。试试看:)

标签： css

【解决方案1】：

似乎大多数其他人还没有完全理解您帖子的要点。我会为你分解它：

CSS positiong 很复杂，因为它是由许多不同的群体在很长一段时间内设计的，具有各种版本和遗留兼容性问题。

最初的尝试是让事情变得简单。只提供基本样式。颜色、字体、大小、尺寸等。他们添加了浮动来提供基本的“剪切”功能，其中文本环绕图像。浮动并不打算像目前使用的那样用作主要的布局功能。

但人们对此并不满意。他们想要柱子、网格、盒子、阴影、圆角，以及各种其他的东西，这些东西是在不同的阶段添加的。同时试图保持与以前的不良实现的兼容性。

HTML 遭受了两个对立派系的争吵。一方面想要简单的（无论如何与现有的 SGML 相比）解决方案，另一方面想要丰富的应用程序。所以 CSS 有时具有这种精神分裂症的性质。

更重要的是，功能被扩展为做他们最初不打算做的事情。这使得现有的实现都非常错误。

那么这对你这个普通人意味着什么？这意味着你被困在处理其他人的脏衣服。这意味着您必须处理十年前的实现错误。这意味着您要么必须为不同的浏览器编写不同的 CSS，要么必须将自己限制在一个通用的“支持良好”的功能集上，这意味着您不能充分利用最新 CSS 的功能（也不能使用那里的功能旨在为标准增加一些理智）。

在我看来，没有比这本书更适合“普通人”理解 CSS 的书了：

http://www.amazon.com/Eric-Meyer-CSS-Mastering-Language/dp/073571245X

它简单、简洁，并以一种有光泽的“容易上手”的格式为您提供真实世界的示例，并且没有大多数讨厌的技术术语。它已有 10 年历史，并未涵盖任何新内容，但它应该能让您“了解”事物的工作方式。

【讨论】：

【解决方案2】：

定位很容易理解：

relative 定位 -- 完全按照您通常的方式呈现页面。一旦完成，任何带有relative 定位的东西都会被移动，相对于它最初的位置。没有其他任何影响。

absolute 定位 -- 从页面流中删除项目。其他东西看起来好像不存在一样，即它们填充了该项目占用的空间。现在，它们绝对定位到具有position: relative 或position: absolute 集合的最近元素。在许多情况下，这意味着它们绝对定位于 body 标记。

然后，您可以在 CSS 中使用 top、right、bottom 和 left 定位内容。

如果某物有absolute定位设置：

在使用top 和left 时相对于页面的左上角 定位。使用bottom 和right 时相对于页面的右下角定位。
它的宽度/高度可以通过top / bottom 或left / right 的组合来控制，例如：top: 100px; bottom: 100px 将创建一个其父级高度为100% - 200px 的项目（除非您也指定高度在这种情况下，top 和 height 被使用，bottom 被忽略）。

【讨论】：

感谢您的解释，尽管这不包括浮动（这似乎是解决我难以置信的复杂用例“把东西放在一起”的必要条件）。另外，当你写“它的宽度/八度可以通过上/下或左/右的组合来控制”时，你是否仍然意识到这听起来多么荒谬（尽管在技术上可能是正确的？）
宽度/高度的事情并不荒谬，这是一种不同的做事方式。如果你有一个灵活大小的父级（例如窗口）并且想要一个占据 90% 宽度的页脚栏，你可以写 left: 5%; right: 5%; bottom: 0px; height: 50px;。如果您手动指定 width，则需要 JS 执行相同的操作。而且我在所有可能的情况下都避免浮动，并且总是建议其他人也这样做。
等等，有没有一种更简洁的方法可以让一堆 div（任意的、未知宽度）一个挨一个地坐在另一个的右边（比如，你知道，“一条线”），没有'将它们全部浮动并在最后添加一个清除'？我的印象是大多数网格框架都以某种方式这样做......