花了一个周末的时间,把 css-postion 的标准读了一遍,把关于 Absolute 和 Relative 的部分的理解在这里记录一下。
Positioning schemes
在 css 中,有三种定位方案:
Normal flow
Floats
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
的祖先元素创建:如果最近的祖先元素是块级元素(block-level),
containing block
由盒子的内边距层(padding edge) 创建。如果最近的祖先元素是内联级元素(inline-level),那么
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 block
top, right, bottom, left
当一个元素的 position 属性被设置了除 static
之外的值, 这个元素的位置可以被 top, right, bottom, left
这四个物理属性决定。注意,在同时设置 left、right
或者 bottom、top
的时候会出现竞争情况。
结尾
因为女朋友在学 css,需要我在旁指导 而 css 一直是我的弱项,所以我花了一个周末时间把 css-position 的标准梳理了下,这样指导起来也比较有底气。这篇文章基本都是对下面参考的链接的笔记,我之前学这部分的内容时,都是从网上找的别人的博客看的,有很多和标准出入的地方,这一天也解了不少的疑惑;如果有想学的同学,还请直接看 css-positon 的草案比较靠谱,而且草案中 example 也有不少。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。