1.定位在网页中的应用
CSS中有三种基本的定位机制，分别是标准流、浮动、绝对定位
2.position属性
position指定盒子的位置，指它相对其父级的位置或相对它自身应该在的位置。
static：默认值，保持在原本应该在的位置，没有任何移动的效果
relative：相对定位，常以标准文档流的排版方式为基础，使盒子相对于它在原本的标准位置偏移指定的距离。盒子仍在标准文档流中。
规律：
relative相对定位的盒子会相对于它原来（初始）的位置，通过指定的偏移量，到达指定位置；
（1）设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响（层级提高，可以把标准文档流的元素及浮动元素盖在下边）
（2）设置相对定位的盒子原来的位置会被保留下来
使用场景：
很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
absolute：绝对定位，盒子位置以包含它的盒子为基础进行偏移，绝对定位的盒子从标准文档流中脱离。意味着对其他盒子的定位没有影响。
结论：
（1）使用了绝对定位的元素（第二个盒子）以它最近的一个已经定位（position属性被设置除static以外的任意一种方式）的祖先（从文档流的任意节点开始，走到根节点，经过的所有节点都是它的祖先，其中直接上级节点是它的父节点，以此类推）元素（#father）为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位
（2）绝对定位的元素（第二个盒子）从标准文档流中脱离，这意味着它们对其他元素（第一个、第三个盒子）的定位不会造成影响（层级提高，可以把标准文档流中的元素及浮动元素盖在下边）
（3）设置绝对定位的盒子原来的位置不会被保留
使用场景：一般情况下，使用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等
fixed：固定定位，以浏览器窗口为基准进行定位，当拖动浏览器窗口的滚动条时，依然保持对象位置不变。
特性：
（1）基准于浏览器窗口
（2）偏移量不会随着滚动条的移动而移动
使用场景：一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
注：以上四个值需要指定一定的偏移量，水平方向用left（正值向右）或right（正值向左）属性，垂直方向使用top（正值向下）或bottom（正值向上）属性
3.z-index属性
用于调整元素定位时重叠层的上下位置
在立体空间中表示垂直于页面方向的z轴。值为整数，可为正可为负。默认为0，值大的位于值小的上方。当两个值相同时，保持原来的高低覆盖关系
设置层的透明度
（1）opacity：x； x值0~1，值越小越透明
（2）filter：alpha（opacity=x） x值为0~100，值越小越透明
网页中的元素都含有两个堆叠层，一个是未设置绝对定位时所处的环境，这时所有层的z-index属性值总为0；另一个是设置绝对定位时所处的堆叠环境，这个环境所处的位置由z-index属性来指定
