绝对定位

绝对定位
当浮动元素被设置为绝对定位
某个元素
```
 float:left;
   position:absolute;
```
- 则他的float属性会被强制设置为none
- 绝对定位元素对其他元素不会造成任何影响，原来的位置不会占用
- 绝对定位的位置
可通过left，top，right，bottom来设置（四个方向都可取负值）
 绝对定位分类
 *  fixed 固定位置
 *  absolute 绝对位置

固定位置
包含块：`position：fixed；`
参考位置：视口的左上角
设置此属性的盒子会脱离文档流
eg：若要将固定在右下角

    bottom：0px；
    right：0px；
如果是固定位置标签，最好写在结束标签之前
绝对位置
包含块：`position：absolute；`
参考位置：视口左上角
1. 依次判断（从里到外）元素是否拥有position不等于static的祖先元素；
2. 如果有，则该元素的填充盒的左上角为当前绝对元素的起点；如果没有，则以初始化包含块的左上角为元素的起点。

建议包含块position属性取值为relative
原因：不会破坏布局，因为absolute或者fixed会脱离文档流，下面文档流会上移，破坏布局。
##元素重叠的问题
堆叠级别：决定了元素谁显示在前，谁显示在后
通常情况下，堆叠级别越高，显示越靠前
设置：通过z-index属性设置元素级别
z-index
元素属性不可继承；默认值：auto（书写顺序靠后的元素靠前显示）；取值：auto，数值。
取值：正无穷到负无穷；（一般是（-1~5））
注意
 1. 不用于静态位置的元素（一般用于固定位置（fixed）或者绝对位置（absolute））
 2. 尽量不使用z-index
块级格式化上下文
全称：Block Formatting Content
简称：BFC
它是一个独立的渲染区域，他规定了在该区域中常规流块盒的布局
解释：
独立的：不同的BFC区域，它们进行渲染时互不干扰（外边距不合并）
BFC渲染区域：这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
根元素
浮动和绝对定位元素
overflow不等于visible的块盒

具体规则
1. 创建BFC的元素，它的自动高度需要计算浮动元素
2. 创建BFC的元素，它的边框盒不会与浮动元素重叠
3. 创建BFC的元素，不会与它的子元素进行外边框合并

何时用both和overflow
`clear：both；`：控制外面的东西不影响自己
`overflow`：控制BFC里面的内容不影响其他元素
eg：一个div标签，有2个兄弟元素，3个子元素
当2个兄弟元素的定位体系影响到我，用clear；
当3个子元素影响到2个兄弟元素的位置时，就用overflow（即创建BFC）
雪碧图
步骤：设置宽高  图片路径  图标位置；