浮动和定位是CSS两大布局方式。浮动布局比较灵活，但不容易控制。定位布局虽然缺乏灵活性，但是却可以让用户精准地定位页面中元素的位置。关于浮动布局的相关知识，在上一个博客中已经总结归纳，今天对定位布局进行学习归纳。
在CSS中，定位布局共有四种方式。
（1）固定定位（fixed）
（2）相对定位（relative）
（3）绝对定位（absolute）
（4）静态定位（static）
对于 定位布局，需要注意：
（1）默认情况下，固定定位元素和绝对定位元素的位置是相对于浏览器而言，而相对定位元素的位置是相对原始位置而言。
（2）position属性一般配合top、bottom、left和right来使用。只有元素定义position属性（除了static）之后，top、bottom、left和right才生效。
（3）top、bottom、left和right这四个属性不一定全部都要用到。
（4）“position：absolute”会将元素转换为块元素。
1：子元素相对父元素定位
语法：
父元素{position：relative}
子元素{
position：absolute；
/*定义top、bottom、left和right*/
}
2：子元素相对祖先元素定位
语法：
祖先元素{position：relative}
子元素{
position：absolute；
/*定义top、bottom、left和right*/
}
3：Z-index属性
虽然网页是平面的，但实际上网页是三维结构，除了X轴、y轴，它还有Z轴。Z轴往往都是用来设定层的先后顺序的。
在CSS中，使用Z-index属性来控制Z轴的大小，从而控制元素的堆叠顺序。
默认情况下，元素z-index属性处于不激活状态，也就是说，默认情况下设置元素的Z-index属性无效。z-index属性只有在元素定义“position：relative”“position：absolute”或者“position：fixed”时才会被激活。
语法：
z-index：取值；
z-index属性取值表：
auto 默认值，堆叠顺序与父元素相等
number 可以为负数，0以及正整数
inherit 规定应该从父元素继承z-index属性的值
W3C标准中对CSS的z-index属性定义为："z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿Z轴的位置，Z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数，则表示离用户更远。"
默认情况下，元素z-index属性值为auto。z-index值为正数的元素在z-index值为0的上面，z-index值为负数的元素在z-index值为0的下面。无论是正数还是负数，z-index值较大的元素会叠加在z-index值较小的元素之上。如果z-index值相同，则遵循”后来者居上“规则来叠加。
切记：如果元素没有指定position属性值（除了static），则z-index属性无效。