理解绝对和相对

作者小艺的博客：很多http://andymao.com/的朋友都问我怎么区分绝对和相对，怎么用。我们都知道绝对是绝对，相对是相对，但是这个绝对和相对是什么意思呢？哪里是绝对的，哪里是相对的？它们有什么特点，能产生什么效果？两者之间有什么技巧？让我们一个一个来解读。绝对，CSS中的写法是：position:absolute他指的是绝对定位。他指的是浏览器的左上角，用TOP、RIGHT、BOTTOM和LEFT(以下简称TRBL)进行坐标定位。如果未设置TRBL，默认情况下，基于父级的原始标记点是原始点。如果设置了TRBL，而父节点没有设置位置属性，那么当前的绝对位置将以浏览器的左上角为原点，位置由TRBL决定。

一般来说，如果网页居中，很容易出错，因为网页总是随着分辨率自动适应，而Absolute以浏览器左上角为原点，不会因为分辨率的变化而改变位置。很多人在这方面都会犯错误。但是，左侧网页的特征与相对相似，但仍有本质区别。相对，CSS中的写法是：position:relative他指的是绝对相对定位。他把父母的原点作为原点。如果没有父点，则以BODY的原点为原点，与TRBL协调定位。当父级中有填充等CSS属性时，当前级别的原始点将参照父内容区域的原始点进行定位。

有时，我们需要依靠z-index来设置容器的上下关系。数值越大，顶部越高，数值范围为自然数。当然，需要注意的是，亲子关系不能用z-index来设置，孩子必须在父母之上，在父母之下。