知识目标
- 掌握定位的概念和常见的定位方式
- 掌握设置定位属性的方法
1. 定位的应用场景
2. 静态定位
当position属性的取值为static 时，可以将标签定位于静态位置。所谓静态位置就是各个标签在HTML文档流中默认的位置。
任何标签在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不是说明该标签没有自己的位置，它会遵循默认值显示为静态位置 。
在静态定位状态下，我们无法通过边偏移属性（top、bottom、left或right）来改变标签的位置。
3. 相对定位
position: relative ：相对定位是元素在移动位置的时候，相对于自身原来的位置来说的；
特点：
- 相对于自己原来的位置来移动
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
用的较多时一般是作为绝对定位孩子的父亲时会使用。
4. 绝对定位（常用）
position: absolute：是元素在移动位置的时候，相对于它祖先元素来说的; 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
子绝父相：常用，一般时想将位置固定在父亲的某个位置上，此时父亲一般使用相对定位，子元素使用绝对定位。然后使用top left bottom right来控制与周边的距离。
5. 固定定位（常用）
position: fixed: 元素固定于浏览器可视区的位置。
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。如置顶按钮，旁边的广告栏。
特点：
- 以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系。
- 固定定位不在占有原先的位置。
- 固定定位也是脱标的，可以看做是一种特殊的绝对定位。
6. 定位模式总结
6. 定位叠放次数
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）。
- 数据可以是正整数，负整数或0，默认是auto, 数值越大，盒子越靠上。
- 如果值一样，则以书写顺序为准，后面的在上。
- 数字后面不能加单位。
- 只有定位的盒子才有z-index属性。
7. 案例演示
