HTML布局之CSS绝对定位
1.1 CSS绝对定位——position
1.1.1语法
position:static;
无特殊定位，对象遵循HTML定位规则。
position:absolute;
将对象从文档流中拖出（即脱离他的父级元素），使用left，right，top，bottom等属性进行绝对定位(相对于整个页面来换算的)。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
position:relative;
对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移位置。
position:fixed;
相对于窗口的固定定位,元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如浏览器中，元素在文档滚动时不会在浏览器视察中移动。left right top bottom四个属性相对于窗口来换算，与相对于整个页面来换算最大的区别是当页面宽高超过窗口的时候。
注意：IE6不支持CSS中的position:fixed属性。
1.1.2实际应用
绝对定位position用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、css margin进行相对定位，这时就可以使用绝对定位。特别是一个盒子里几个小盒子不规律的布局，这个时候使用position绝对定位非常方便布局对象。
例：绝对定位子级块在父级块盒子内的位置。
HTML代码
<div class="div1">
<div class="div1-a"></div>
</div>
CSS代码
.div1{
/*定义父级position:relative，就认为是绝对定位声明吧*/
position:relative; /*最好再定义CSS宽度和CSS高度*/
}
.div1-a{
/*使用绝对定位position:absolute样式并且使用left、top进行定位位置*/
position:absolute;
left:10px; /*定义了距离父级左侧距离间距为10px*/
top:10px; /*定义了距离父级上边距离为10px*/
}
或
.div1-a{
/*使用绝对定位position:absolute样式并且使用right、bottom进行定位位置*/
position:absolute;
right:10px; /*定义了距离父级靠右距离10px*/
bottom:10px; /*定义了距离父级靠下边距离为10px*/
}
注意:
1>left（左）和right（右）在一个对象只能选一种定义，bottom（下）和top（上）也是在一个对象只能选一种定义。
2>绝对定位与float浮动不能同时使用。
总结
通过CSS进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。
绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这时将会以body标签为父级。使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。
left、right、bottom、top的数值可以使用PS切片工具获取准确的数值。
1.2 CSS层重叠顺序——z-index
实际上，应该把网页想象成鸟瞰图。虽然看到的是平面的，但实际上它是有立体的概念的。z-index来管理HTML元素的高度。
注意：后写的定位的层级比先写的高。
1.2.1语法
z-index:number[具体数字];数字为负值时，设置该属性的元素被普通流中的元素覆盖。
z-index:auto[默认，IE6/IE7中未设置的情况下，元素的z-index值为零];设置了该属性的元素不参与层级比较。
z-index:inhert;
例：
div{
z-index:100;
}
注意：
z-index的数值不跟单位。
值必须为整数和正数（正数的整数）。
z-index的值越高越靠前。
z-index使用条件
z-index的使用依赖于定位属性，让不同的对象盒子以不同顺序重叠排列。
1.2.2两个DIV或多个DIV顺序重叠加
使用position实现绝对定位，对父级设置position:relative属性，对其子级设置position:absolute加上left或right和top或bottom实现子级在父级内任意定位。在原始情况下重叠是按DIV代码本身顺序排列，越后输入的DIV盒子其越靠前（浮在上面）。除了改变源代码本身div代码在html顺序，还可以使用css z-index实现DIV层排列顺序。