一 、css定位属性：position：absolute / fixed / relative / static / inherit
定义和用法
position 属性规定元素的定位类型。
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
默认值：
static
继承性：
no
版本：
CSS2
JavaScript 语法：
object.style.position="absolute"
可能的值
1）absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。元素内容完全从正常流中脱离出来，不再占用原正常流的空间。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
2）fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素内容完全从正常流中脱离出来，不再占用原正常流的空间。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
3）relative：生成相对定位的元素，参考自身静态位置通top,bottom,left,right 定位，并且可以通过z-index进行层次分级。相对于其正常位置进行定位（相对于自身位置进行定位）。定位后，仍占用原正常流的空间。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
4）static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5）inherit：从父元素继承position属性。
二 、position属性absolute与relative 详解
一 . 解读absolute与relative
absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面就来一一解读。
Absolute CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合top、right、bottom、left(下面简称TRBL)进行定位，在没有设定TRBL，默认 依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位， 位置将由TRBL决定。
http://www.blueidea.com/articleimg/2006/11/4249/absolute.gif
一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。
Relative CSS中的写法是：position:relative;他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
http://www.blueidea.com/articleimg/2006/11/4249/relative.gif
有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
二 详解定位与定位应用
定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。
定位的定义：
在CSS中关于定位的内容是：
position:relative | absolute | static | fixed
static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
relative(相对定位)对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed（固定定位）这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
注：
CSS中定位的层叠分级：z-index: auto | namber;
auto遵从其父对象的定位
namber 无单位的整数值。可为负数
定位的原理：
1.可以位移的元素（相对定位）
在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮 动，也可以通过margin来让元素产生位置移动。但事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left（下称TRBL，TRBL可以折分使用。）针对一个相对定位的元素所产生的。我们看下面的图：
我们看图中是一个相对定位的元素
#first {
width:200px;
height: 50px;
margin:25px;
border:25px solid #333;
padding:25px;
position:relative;
top: 50px;
left: 50px;
}
而下方是一块默认定位的黑色区块
#second {
width:400px;
height:75px;
margin:0;
border:0;
padding:0;
backgroud-color:#333;
}
我们看到这个处在文本流的区块被上面的相对定位挡住了一部分，这说明：“当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值。并且我们发现当相对定位元素进行位后，表现内容已经脱离了文本流，只是在本文流中还为原来的相对对定位留下了原有的总宽与总高（内容的高度或是宽度加上 margin\border\padding的数值）。这说明在相对定位中，虽然表现区脱离了原来的文本流，但是在文本流中还还有此相对定位的老窩。这点要特别注意，因为在实际应用中如果相对定位的位移数值过大，那么原有的区域就会形成一块空白。
并且我们注意，定位元素的坐标点是在margin值的左上边缘点，即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。
2.可以在任意一个位置的元素（绝对定位）
如上所述：相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来，如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位，如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素，使之处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。看下图：
http://s11.album.sina.com.cn/pic/4bcf4a5e02000l9a
上图可知，文本流中的内容会顶替绝对定位无素的位置，一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是他们的被绝对定位后的坐标原点。
3.被关联的绝对定位
上面说的是单一的绝对定位，而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动，而并且是因定在网页的某一个固定位置。通常当网页是居中形式的时候这种效果就会显得特别的重要。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。
虽然是如此，但是这个坐标原点却并不是父级的坐标原点，这是一个很奇怪的坐标位置。我们看一下模型图示：
我们看到，这个图中父级为黑灰色区块，子级为青色区块。父级是相对定位，子级是绝对定位。子级 设置了顶部位移50个像素，左倾位移50个像素。那么我们看，子级的坐标原点并不是从父级的坐标原点位移50个像素，而是从父级块的padding左上边缘点为坐标起始点（即A 点）。而父级这里如果要产生位置移动，或是浏览器窗口大小有所变动都不会影响到这个绝对定位元素与父级的相对定位元素之间的位置关系。这个子级也不用调整 数值。
这是一种很特别并且也是非常实用的应用方式。如果你之前对于定位的控制并不自如的话，相信看完对这里对定位的解释一定可以把定位使用得随心所欲。
4.总在视线里的元素 （固定定位）
position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
三 、float、clear、position（重点相对定位和绝对定位）用法总结
跟网页布局纠结了很久，现在把一点心得和理解整理出来，防止记忆就这么跟着时间飘掉了。
先来理解CSS的定位机制。CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 X(HTML) 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
一、float
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
其默认值是none。所有主流浏览器都支持 float 属性。
float的属性值有四个，如下：
left: 元素向左浮动。
right :元素向右浮动。
none :默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit:规定应该从父元素继承 float 属性的值。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
以上是W3C中对float的部分解释。
上述文字并不难理解，可以发现float实际上是将块级元素脱离普通文档流，该元素的垂直距离取决于它原来在文档中的位置，顶端与当前行的顶端对齐，而水平方向则尽可能的向容器边缘移动，且仍遵守填充距离padding的设定值。行内元素会将其环绕。
float打破了既定的框的排列顺序，将块级元素漂浮到我们希望它在的位置上。
二、clear
clear 属性规定元素的哪一侧不允许其他浮动元素。
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。默认值为none，且所有主流浏览器都支持 clear 属性。
clear可以取的几个属性值：
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
以上为W3C对clear的部分解释。
同时用overflow：hidden也可以为标签清除浮动。为什么要清除浮动在下面的例子中会提到。
三、position
position 属性规定元素的定位类型。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
position的属性值
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
上述W3C对position的属性值定义写的很清楚，理解起来没什么障碍。只要注意absolute是相对于父元素来进行定位，这里的父元素指的是也是绝对定位的父元素，如果不存在这样的父元素，就相对于body，即是上文中的“相对于 static 定位以外的第一个父元素进行定位”。而relative是相对于元素本来应该在的位置进行的定位。如果元素设置了margin值，那就在margin的基础上进行移动。
相对定位不会将元素脱出普通文档流，将其看做普通流定位的一部分。而设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
CSS布局是网页排版的一个重要部分，要清晰熟练的掌握这些方法属性必须多加练习，练的多了就有了自己的体会，日积月累便能运用自如。
下面举个小例子，看看各种定位方法的效果。
网页中有三块内容，每块放入一个div中，一块为空div（设置了宽高），一块为图片div，一块为文字div。我们可以分别做实验看下效果。我为div加了框便于区分。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div id="blank"></div>
<div id="image"><img src="cat.jpg" /></div>
<div id="intro">
<p>现在，猫成为了全世界家庭中极为广泛的宠物。研究表明，猫不吃老鼠，夜视能力就会有所下降，会长期丧失夜间活动的能力。德国海德堡大学有一份研究称老鼠体内有一种牛黄酸的物质，可以增强生物的夜视能力，而猫体内不能自己合成该物质，只能通过吃老鼠进行补充。</p>
</div>
</body>
CSS样式表：
1、什么效果都不加，只设置大小
body{ margin: 0; padding: 0;}
div#blank{width:500px; height:200px; border:1px #99CC33 solid; }
div#image{width:500px; height:333px; border:1px #FF0000 solid;}
#intro{ width:700px; border:1px #663366 solid;}
float、clear、position（重点相对定位和绝对定位）用法总结
2、将blank向左浮起来
body{ margin: 0; padding: 0;}
div#blank{width:500px; height:200px; border:1px #99CC33 solid; float:left;}
div#image{width:500px; height:333px; border:1px #FF0000 solid;}
#intro{ width:700px; border:1px #663366 solid;}
float、clear、position（重点相对定位和绝对定位）用法总结
3、用clear清除浮动
body{ margin: 0; padding: 0;}
div#blank{width:500px; height:200px; border:1px #99CC33 solid; float:left;}
div#image{width:500px; height:333px; border:1px #FF0000 solid; clear:both;}
#intro{ width:700px; border:1px #663366 solid;}
float、clear、position（重点相对定位和绝对定位）用法总结
4、用overflow清除浮动
body{ margin: 0; padding: 0;}
div#blank{width:500px; height:200px; border:1px #99CC33 solid; float:left;}
div#image{width:500px; height:333px; border:1px #FF0000 solid; overflow:hidden;}
#intro{ width:700px; border:1px #663366 solid;}
float、clear、position（重点相对定位和绝对定位）用法总结
5、将前两个div浮起来，文字部分的width拉长，可以看到文字环绕效果。
body{ margin: 0; padding: 0;}
div#blank{width:500px; height:200px; border:1px #99CC33 solid; float:left;}
div#image{width:500px; height:333px; border:1px #FF0000 solid; float:left;}
#intro{ width:1300px; border:1px #663366 solid;}
float、clear、position（重点相对定位和绝对定位）用法总结
6、将blank设置成相对定位
body{ margin: 0; padding: 0;}
div#blank{width:500px; height:200px; border:1px #99CC33 solid; position:relative; left:100px; top:100px;}
div#image{width:500px; height:333px; border:1px #FF0000 solid; }
#intro{ width:1300px; border:1px #663366 solid;}
float、clear、position（重点相对定位和绝对定位）用法总结
可以看出blank下移100像素，右移100像素，而其他元素的位置均没变；
7、将image设置成绝对定位
body{ margin: 0; padding: 0;}
div#blank{width:500px; height:200px; border:1px #99CC33 solid;}
div#image{width:500px; height:333px; border:1px #FF0000 solid; position:absolute; top:100px;}
#intro{ width:700px; border:1px #663366 solid;}
float、clear、position（重点相对定位和绝对定位）用法总结
可以看出image脱出文档流（因为intro元素顶上去了），出现在距离顶部100像素的地方。
在试验中发现，若两张相同的图片放在网页中，将其中一张往左边浮动，不会覆盖另一张，而如果是两块div则会覆盖起来。
你可以尝试修改html，将img标签去掉，用2中的CSS样式，可以发现两块div重叠了。
若div中有文字，文字将会环绕浮起来的那块div，你可以将图片去掉，让blank浮起来并在image中加入文字，可以发现文字环绕blank显示。
另外的各种情况就可以通过修改样式表来看效果。在这里就不赘述了。另外还有float和相对定位，绝对定位混合用的情况，可以根据实际情况进行运用，只要记住基本的规则就不会用错的。
