Open zwhu opened 8 years ago
花了一个周末的时间，把 css-postion 的标准读了一遍，把关于 Absolute 和 Relative 的部分的理解在这里记录一下。
在 css 中，有三种定位方案:
Normal flow 是最常见的 BFC 和 IFC，也就是常说的块级元素从上到下，内联元素从左到右布局的情况；Floats 即常见的盒子水平布局的情况；Absolute positioning 让盒子完全脱离 Normal flow， 通过设置 top，left 等属性来决定 position。
注意：这里只说到 Floats 和 Absolute 是 out-of-flow 的，没有说 Relative。我看过很多文章都说 Relative 也让盒子脱离了流，是错误的说法（我就深受其害）。
out-of-flow
一个元素的盒子的位置和大小通常是由一个特定的矩形计算出来的，这个特定的矩形就是元素的 containing block。 对于 static 和 relative 的元素，它的 containing block 同普通盒子，一般是指包含它的最近的父级元素（nearest ancestor）。对于 fixed（不在这次文章之内，按下不表）和 absolute 有如下的表现:
containing block
static
relative
nearest ancestor
containing block 被最近的positon不等于static的祖先元素创建:
positon
direction
position
initial containing block
注意：对于上面第三点，initial containing block 并不是指 body， 我看到很多文章都把这里说成 body。
body
相对定位：是相对于自己定位。在 normal flow 中，元素的大小是不变的，通过设置top等属性，改变元素相对于自身的位置。所以被 relative 的元素，是可能会和其他元素重叠的，但是不会对之后的元素的位置有影响。 一个相对定位的盒子会为后代节点创建一个新的绝对定位的 containing block。
normal flow
top
对于 position： absolute 和 position： fixed 都是指 Absolute positioning。 本文暂只讨论 position: absolute。 Absolute positioning 被称为绝对定位。 绝对定位的元素是根据其 containing block 决定的，完全脱离 normal flow， 对后续的兄弟节点的布局无任何影响。一个绝对定位的盒子会为后代节点创建一个新的绝对定位的 containing block 和为子节点创建一个 normal flow 的containing block
position： absolute
position： fixed
Absolute positioning
position: absolute
当一个元素的 position 属性被设置了除 static 之外的值， 这个元素的位置可以被 top, right, bottom, left这四个物理属性决定。注意，在同时设置 left、right 或者 bottom、top 的时候会出现竞争情况。
top, right, bottom, left
left、right
bottom、top
因为女朋友在学 css，需要我在旁指导 而 css 一直是我的弱项，所以我花了一个周末时间把 css-position 的标准梳理了下，这样指导起来也比较有底气。这篇文章基本都是对下面参考的链接的笔记，我之前学这部分的内容时，都是从网上找的别人的博客看的，有很多和标准出入的地方，这一天也解了不少的疑惑；如果有想学的同学，还请直接看 css-positon 的草案比较靠谱，而且草案中 example 也有不少。
草案
花了一个周末的时间，把 css-postion 的标准读了一遍，把关于 Absolute 和 Relative 的部分的理解在这里记录一下。
Positioning schemes
在 css 中，有三种定位方案:
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的祖先元素创建:containing block由盒子的内边距层(padding edge) 创建。containing block由书写模式的direction属性决定。这种情况比较少用，不分析了。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 blocktop, right, bottom, left
当一个元素的 position 属性被设置了除
static之外的值， 这个元素的位置可以被top, right, bottom, left这四个物理属性决定。注意，在同时设置left、right或者bottom、top的时候会出现竞争情况。结尾
因为女朋友在学 css，需要我在旁指导 而 css 一直是我的弱项，所以我花了一个周末时间把 css-position 的标准梳理了下，这样指导起来也比较有底气。这篇文章基本都是对下面参考的链接的笔记，我之前学这部分的内容时，都是从网上找的别人的博客看的，有很多和标准出入的地方，这一天也解了不少的疑惑；如果有想学的同学，还请直接看 css-positon 的草案比较靠谱，而且草案中 example 也有不少。
参考:
草案