CSS 相对定位和相对定位的区别

css布局中的 position:static|absolute|fixed|relative 的4中属性

从上面语法可以看出，定位的方法有很多种，它们分别是静态(static)，绝对定位(absolute)，固定(fixed)，相对定位(relative)。在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：绝对定位(absolute)、相对定位(relative)。

绝对定位(absolute)：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据body对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过z-index属性控制，z-index值为无单位的整数，大的在最上面，可以有负值(目前负值FF不支持)。

相对定位(relative)：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

我刚开始写样式的时候，很容易在position:absolute出现错位了，纠结了1年之后，基本上写的样式兼容ie各个版本，火狐浏览器，谷歌浏览器，360浏览器等主流浏览器。

position:static是默认的属性。

absolute：尽量不要使用left:px。。right:px等属性。尽量使用margin-left:多少px;这样不容易错位。

fixed：是固定死的。无论你浏览器上下如何滚动，距离浏览器器的具体都不会改变的。

relative：相对定位。

以下是demo1:

层级关系为：

为改变参照物（橘色框）后的效果层级关系为：

参照物为最顶级的元素情况。层级关系为：