position中的absolute和relative

在我起初接触定位时，并没有太过了解absolute和relative两个属性，然而，在写项目过程中，特别是在排版每个html元素时，总会与这两个元素打下交道，当我用了之后，发现这两个属性真的是非常神奇！
首先聊聊absolute属性把，它被我们称之为绝对定位，为什么称为绝对定位呢，因为用了absolute属性的html元素可以出现文档的任何位置，absolute拥有超脱文档流的能力，什么是超脱文档流呢，比如，我写了一个div名为container，我为div限制了宽和高都为200像素，在div里设置又添加了一个div，将该div命名为demo,按常理说，我添加了一个块，想要添加下一个块时，下一个块会出现在第一个块位置的后面，而用了absolute之后，两个盒子可以进行重叠，因为就像之前说的，absolute可以出现在文档的任何我i只，换句话说，因为div本身是一个盒子，用了absolute之后该盒子就会无视第一个块，这就是超脱文档流。
如下图所示（absolute）:


上图就是两个块重叠的结果，所以说absolute是一个叛逆的属性。

而relative则是一个比较随和的属性了，relative则按照自身位置来进行定位。