小鸡君の前端小姜汤【第015期】- 绝对定位

前面我们学过了“表格布局”（回复 007 或 7）的简单栗子，如果大家用心尝试的话，应该已经可以做出一些粗糙的页面了。

但是前面我们也说过，表格布局几乎已经是被淘汰的技术，只有在 EDM 邮件页面中才会用到，还有一些对代码质量要求不高的快速页面会用。

那么这一期，我们来了解一点真正的 CSS 布局技术。首先我们从最简单的绝对定位开始，因为它最容易理解。

绝对定位

依然遵从我们的原则，不讲原理，不贴文档，直接从代码栗子开始。接上期的代码例子，我们在内联样式中写一段定位代码：

大家请看代码，里面的属性和值几乎可以直译成中文了：

位置: 绝对;

顶部: 100像素;

左侧: 100像素;

我们先来看看效果：

上面的代码中就是所说的“绝对定位”，默认情况下，它是相对于文档根元素（html 或 body）来定位的。

还有一种情况，就是当它的祖先元素中有定位元素时，它的位置就是相对于这个定位元素的。例如：

这里 h1 包含的 a 元素就是 h1 的后代元素。它们的“辈分”是靠包含关系确定的，多包含一层就变爹，再包一层就变爷爷～

那么既然 a 是 h1 的后代元素，且 h1 已经应用了绝对定位，那么 h1 就是所谓的“定位祖先”了。

如果 a 再应用绝对定位的话，就是相对于 h1 目前的左上角来定位的：

再来看一下效果：

这里给 a 设置的 50px，位置已经是从 h1 左上角开始计算的了。这里还有一点要注意，之所以说“定位祖先”，而没有说定位的爹，就意味着，中间有多少层都没关系。

但是，只要有应用了定位的，那参考位置就变为定位元素的左上角。如果有多个定位祖先，则只相对于离自己最近的那个，即“辈分”或者说层级相差最少的那个祖先。

大家消化一下，有什么问题请留言给小鸡君～