介绍定位
静态定位 static
将元素放入它在文档布局流中的正常位置
相对定位 relative
占据在正常的文档流中
position: relative;
top：10px；
left；20px；relative需要配合top left等使用
绝对定位absolute
不存在于文档流
它坐在它自己的层独立于一切，意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……
会垂直居中
position：absolute；
top:0;
left:0;
right:0;
bottom:0;定位上下文
哪个元素是绝对定位元素的“包含元素”？ 默认情况下，它是元素——定位的元素是被嵌套在中的HTML源代码，但在最终的布局，它离页面边缘的顶部和左侧30px距离，这是元素。 这更准确地称为元素的定位上下文。
我们可以改变定位上下文——绝对定位的元素相对于其定位的元素。 这是通过在元素的其他祖先之一上设置定位来实现的——它是嵌套在其中的元素之一
介绍z-index
用过z-index 来控制哪个元素在前边
固定定位 fixed
这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。