静态+绝对+相对+固定定位

一.概念
定位：position：static/absolute/relative/fixed
1.static 静态定位（文档流布局）默认
2.absolute:绝对定位
3.relative：相对定位（不脱离文档流）
4.fixed：固定定位

二.看谁定位
绝对定位：定位元素由left，right，top，bottom设置位置。绝对定位元素在没有相对父级定位参照时，统一相对于浏览器窗口左上角定位；
相对定位：相对于自身标签定位，让其绝对定位子元素相对于该标签定位；
固定定位：永远相对于浏览器窗口定位

三.注意
一般情况下，父级标签设置相对定位，子级标签设置绝对定位；
绝对定位元素相对于距离最近的父级定位元素定位。
脱离文档流的元素，默认宽高由内容撑开。
固定定位和绝对定位会脱离文档流。
默认情况下，越后定位的元素，视图层级越高；
z-index:设置脱离文档流定位元素的视图层级，值越大，视图层级越高，默认是0。

四.总结
1.定位（position）布局：更加精确的布局，主要用来处理一些特殊网页布局的（网页叠加效果，固定位置部分）
通过left，top，bottom，right改变元素位置； -进行定位；
*static 静态定位，html标签的默认值，即没有定位，文档流布局
*relative 相对定位：相对于自身元素标签定位；目的：使用后代元素相对于该标签定位；注意：相对定位元素没有脱离文档流；
*absolute 绝对定位：会脱离文档流，没有设置相对定位的元素，则相对于浏览器窗口定位；如果有参照相对定位的元素，则距离最近的定位元素定位；
*fixed 固定定位：作用是固定元素的位置；脱离文档流，相对于浏览器窗口固定位置；
一般情况下，父级元素设置相对定位，子级元素设置绝对定位；
z-index属性用来设置定位元素的视图层级，值越大，则视图层级越高；
绝对定位和固定定位的特点：
1.宽高默认由内容撑开
2.可以设置宽高
3.脱离文档流

相对于父级，未出现横向布局，在文档流中操作
若出现横向布局，使用
①display：inline-block；
②使用浮动
③使用定位