1.定位布局概述

定位布局共有4种方式,都是通过position属性来实现的

语法： position 属性值;

fixed  ==  固定定位
relative  ==  相对定位
absolute  ==  绝对定位
static  ==  静态定位（默认）

1.1固定定位

固定定位是最直观也是最容易理解的定位方式，在CSS中，我们可以使用"position:fixed;"来实现固定定位。所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置

语法：

position: fixed;
//设置偏移
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

说明：在上面的语法中position:fixed;是结合top、bottom、left和right这4个属性一起使用的。position:fixed使得元素成为固定定位元素，然后使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置

1.2相对定位

相对定位是元素在移动位置的时候，是相对于它【原来的位置】来说的，我们使用position:relative;"来实现相对定位

语法：

position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

说明：从这个例子可以看出，相对定位元素的top和left是相对于该元素原始位置而言的，而且原有位置并不会让出，相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响

1.3绝对定位

绝对定位在几种定位方式中使用最为广泛，因为它能够很精确地把元素定位到任意你想要的位置。一个元素变成了绝对定位元素，这个元素就完全脱离文档流了

语法：

position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

1.5z-index属性

调整元素定位时重叠层的上下位置,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

语法：

z-index:属性值;
auto  ==  默认。堆叠顺序与父元素相等
number  ==  设置元素的堆叠顺序