Absolute 和 Relative

花了一个周末的时间，把 css-postion 的标准读了一遍，把关于 Absolute 和 Relative 的部分的理解在这里记录一下。

Positioning schemes

在 css 中，有三种定位方案:

1. Normal flow

2. Floats

3. Absolute positioning

Normal flow 是最常见的 BFC 和 IFC，也就是常说的块级元素从上到下，内联元素从左到右布局的情况；Floats 即常见的盒子水平布局的情况；Absolute positioning 让盒子完全脱离 Normal flow， 通过设置 top，left 等属性来决定 position。

注意：这里只说到 Floats 和 Absolute 是 out-of-flow 的，没有说 Relative。我看过很多文章都说 Relative 也让盒子脱离了流，是错误的说法（我就深受其害）。

Containing Blocks

一个元素的盒子的位置和大小通常是由一个特定的矩形计算出来的，这个特定的矩形就是元素的 containing block。 对于 static 和 relative 的元素，它的 containing block 同普通盒子，一般是指包含它的最近的父级元素（nearest ancestor）。对于 fixed（不在这次文章之内，按下不表）和 absolute 有如下的表现:

• containing block 被最近的positon不等于static的祖先元素创建:

  1. 如果最近的祖先元素是块级元素(block-level)，containing block 由盒子的内边距层(padding edge) 创建。

  2. 如果最近的祖先元素是内联级元素(inline-level)，那么containing block 由书写模式的 direction 属性决定。这种情况比较少用，不分析了。

  3. 如果没有祖先元素，或者祖先元素没有设置 position 为 static 以外的值，那么 containing block 就是 initial containing block。

注意：对于上面第三点，initial containing block 并不是指 body， 我看到很多文章都把这里说成 body。

Relative positioning

相对定位：是相对于自己定位。在 normal flow 中，元素的大小是不变的，通过设置top等属性，改变元素相对于自身的位置。所以被 relative 的元素，是可能会和其他元素重叠的，但是不会对之后的元素的位置有影响。 一个相对定位的盒子会为后代节点创建一个新的绝对定位的 containing block。

Absolute positioning

对于 position： absolute 和 position： fixed 都是指 Absolute positioning。 本文暂只讨论 position: absolute。 Absolute positioning 被称为绝对定位。 绝对定位的元素是根据其 containing block 决定的，完全脱离 normal flow， 对后续的兄弟节点的布局无任何影响。一个绝对定位的盒子会为后代节点创建一个新的绝对定位的 containing block 和为子节点创建一个 normal flow 的containing block

top, right, bottom, left

当一个元素的 position 属性被设置了除 static 之外的值， 这个元素的位置可以被 top, right, bottom, left这四个物理属性决定。注意，在同时设置 left、right 或者 bottom、top 的时候会出现竞争情况。

结尾

因为女朋友在学 css，需要我在旁指导 而 css 一直是我的弱项，所以我花了一个周末时间把 css-position 的标准梳理了下，这样指导起来也比较有底气。这篇文章基本都是对下面参考的链接的笔记，我之前学这部分的内容时，都是从网上找的别人的博客看的，有很多和标准出入的地方，这一天也解了不少的疑惑；如果有想学的同学，还请直接看 css-positon 的草案比较靠谱，而且草案中 example 也有不少。

参考:

草案