一、定义
(1)语法
position : static | absolute | fixed | relative
(2) 说明
能够看出，定位的方法有非常多种。它们各自是静态（static）。绝对定位（absolute）。固定(fixed)，相对定位（relative）。两个较经常使用的定位方法：绝对定位（absolute）、相对定位（relative）。
绝对定位（absolute）：将被赋予此定位方法的对象从文档流中拖出，使用left。right。top。bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位。假设对象的父级没有设置定位属性，即还是遵循HTML定位规则的。则根据 body对象左上角作为參考进行定位。绝对定位对象可层叠，层叠顺序可通过 z-index属性控制，z-index值为无单位的整数，大的在最上面，能够有负值（眼下负值FF不支持）。
#box_relative{
position: absolute;
left: 30px;
top: 20px;
}
例如以下图所看到的：
相对定位（relative）：对象不可层叠，根据left。right，top，bottom等属性在正常文档流中偏移自身位置。相同能够用z-index分层设计。
假设将 top 设置为 20px。那么框将在原位置顶部以下 20 像素的地方。
假设 left 设置为 30 像素。那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative{
position: relative;
left: 30px;
top: 20px;
}
例如以下图所看到的：
注意。在使用相对定位时。不管是否进行移动，元素仍然占领原来的空间。因此。移动元素会导致它覆盖其他框
相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”近期的已定位祖先元素，假设不存在已定位的祖先元素。那么“相对于”最初的包括块。
二、什么情况下用
绝对定位是相对于父标签决定位置，一般用于相对定位标签里面，JS特效经经常使用到。
相对定位是相对于上一个相对定位的。一般用于浮动定位标签里面。一般跟绝对定位配合使用。
绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其他要素的定位设置。相对定位指你所定位的要素的位置相对于 它在文件里所分配的位置。
实例：
<body>
<div id="bq1"style=" position:absolute; left:10px; top:10px; "></div>
<div id="bq2"style=" position:relative;"></div>
<div id="bq3"style=" position:relative;">
<div id="bq4"style=" position:absolute; left:10px; top:10px;"></div>
</div>
</body>
以下仅仅说id名代表div
绝对定位：position:absolute
假设bq1（绝对定位）外面没有div等父标签，bq1会以body为父标签。
左边距距body 10像素，上边距距body 10像素。
假设bq4（绝对定位）在bq3（相对定位）里面，左边距距bq3 10像素。上边距距bq3 10像素。
相对定位：position:relative
bq2（相对定位)总是相对于前面的同级标签为基准标签（bq1）。
bq3以bq2为基准标签。
三、定位的形象解释（转）
我先来架设一个虚拟的场景：有一个矩形的房间，里面另一个水桶装了些水，水里还浸泡着一个西瓜，这个房间半空中还有不少的钩子用于挂东西用。如今我把网页元素与上面物件相应上，那么房间就是一个网页，水桶是网页中的一个板块。桶中的水就是文本流，西瓜就是将要被定位的对象。
（1）贡献的绝对定位（absolute）
对比前面解释，假设西瓜被赋予绝对定位。那么就等于把西瓜从水中捞起来挂在半空中的钩子上，水桶中西瓜原来占用的空间水会自己主动填补它（绝对定位对象会让出自己原先占用位置，所以说它是贡献的）。
此时假设之前没有对水桶进行定位设定，那么被拿起的西瓜位置不会再受水桶位置影响，水桶怎么移动。西瓜还是挂在原来位置，至于西瓜要怎放，则以房间左上角（body左上角）为准。用left，right，top，bottom值来定位。可是假设水桶也给出了定位设置（一般是相对定位，以下有说到这一有用技巧），此时西瓜的摆放就没有那么自由了。虽然此时西瓜被拿起来了不会影响水桶中的水（文本流），但它还是要听桶的话，桶会告诉西瓜“你能够活动，但应该在我的范围内走动，比方说我要你在我左上方1米处，你就要跟死这一点，我走你也要跟着走”。假设桶中有非常多个西瓜，能够所有拿出来吊到半空中，它们将被安排在不同高度的空间（层），所以在房顶垂直往下看，有可能看到不同西瓜层叠在一起的情况（这个所谓的高度在网页中是不存在的。就像FLASH动画中的不同层上安排了元素。但它们在看时不会有深度感觉）。可见绝对定位的对象參考目标是它的父级，专业称之为包括块。
（2）自私的相对定位（relative）
相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置。不会让给他周围的诸如文本流之类的对象。相对定位也比較独立，做什么事它自己说了算。要定位的时候，它是以自己本身所在位置偏移的（相对对象本身偏移）。
再拿前边作比方来解，那么此时西瓜似乎是有魔法的，假设西瓜通过相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象：水中有一个地方水凹下去了，周围的水不能填补它，西瓜看起来在旁边，假设搅动一下桶中的水，那个凹的位置会发现改变（文本流对相对定位对象还存在影响），可是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响，由于对象并没有真正脱离文本流，就像有两个人在同一层楼水平移动的过程中会有碰头的机会。
（3）总结两种定位的特征
绝对定位就像是把不同对象安排到了一栋高楼的不同楼层(一般指不是第一层，我们这里理解为文本流就放在首层)，它们互不影响，可是它们怎么移动与你楼的地基和面积（父级）有关。相对定位指对象还是在首层楼与文本流一起存放，它们之间肯定存在影响。
（4）对特殊情况的补充
在用相对定位和绝对定位的时候，有一种情况是它们的定位值用到了负值则对象可沿相反方向移动，刚才说到的把对象安排在一栋楼的不同层，假设某个对象一開始就是背靠着最外边墙的。此时再用一个负值定位它，它就会奇妙般地跑出墙外去了，当然现实中可没有这样的惊险而又奇妙的事发生，本人仅仅为了延用上面的比方作形象解释。