定位

## 定位
- 更高级的布局方式.比浮动更加灵活
- 通过定位可以将元素摆放到页面中任意位置
- 定位分为三种: 相对定位. 绝对定位. 固定定位
- 通过position属性来设置元素的定位
    - static 默认值 没有开启定位
    - relative 开启相对定位
    - absolute 开启绝对定位
    - fixed 开启固定定位 
- 偏移量
    - 当元素开启定位以后,可以通过四个偏移量来设置元素位置
    - top 元素距离定位元素上边的偏移量
    - bottom 元素距离定位元素底部的偏移量
    - left 元素距离定位元素左侧的偏移量
    - right 元素距离定位元素右侧的偏移量
    - 一般偏移量只需要两个即可.一个水平方向,一个垂直方向
- 层级
    - 当元素开启定位以后会提升层级. 可通过z-index来设置元素层级
    - z-index需要一个正整数作为参数. 
    - 值越大层级越高.层级越高越优先显示
    - 层级一样靠后面的显示
    - 父元素永远都不会盖住子元素

#### 相对定位
- 当元素的position属性设置为relative就开启了相对定位
- 相对定位特点:
    1. 当给元素开启相对定位而不设置偏移量时,元素为不会发生改变
    2. 相对定位的元素是相对于元素自身在文档流中的位置进行定位
    3. 相对定位的元素不会脱离文档流.占据空间
    4. 相对定位不会改变元素的性质
    5. 相对定位会提升元素的层级

#### 绝对定位
- 当元素的position属性设置为absolute就开启了绝对定位
- 绝对定位特点:
    1. 绝对定位的元素会完全脱离文档流.不占据空间
    2. 绝对定位的元素会相对于**离它最近的开启了定位的祖先元素定位**. 如果祖先元素没有开启定位则以浏览器窗口定位
    3. 绝对定位会提升元素的层级
    4. 绝对定位会改变元素的性质. 内联元素变成块元素 

#### 固定定位
- 当元素的position属性设置为fixed就开启了固定定位
- 固定定位也是一种绝对定位. 大部分功能和绝对定位一致
- 固定定位的特点
    1. 固定定位永远相对于浏览器窗口定位 (隐藏整屏小广告链接)
    2. 固定定位的元素一旦定位则会固定在浏览器窗口中不动
    3. 固定定位元素不会随滚动条滚动