CSS position定位之relative和absolute

一、relative 属性值

1. relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。
2. 它必须搭配top、bottom、left、right这四个属性使用，用来指定偏移的方向和距离。
3. 必须注意的是在文本流中的位置依然存在。
4. 当父级、TRBL、padding组合作用时，relative元素具有以下属性：

   1). 如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样)，如果在没有父级元素的情况下，存在文本，则以文本的底部为原始点进行定位并将文字断开(和absolut不同)。 2). 如果设定TRBL，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolut不同)。 3). 如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置 由TRBL决定(前半段和absolute一样)。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolut不同)。

二、absolute 属性值

1. absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
2. 修饰第一条，它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。
3. 与relative的区别是其在正常流中的位置不再存在
4. right: 0;top: 0; bottom: 0; left: 0; margin: auto;可设置成子盒子在父盒子里居中显示

三、relative 和 absolute的区别

1. 正常流中的位置存在与否
2. 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。