携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

定义:

定位是指可以定义元素盒子相对于自身或者父元素，另一个元素甚至是根元素，浏览器页面的位置变化，主要应用是做标准流或者浮动无法实现的效果

分类:

大致可以分为四类:

1、静态定位（static） 静态定位不会脱离文档流，是最基础的定位，如果一般的元素不加属性的话都属于静态定位，所以静态定位也不会受到top, bottom, left, righ属性影响，应用不太多

position:static

2、相对定位（relative）

相对于自己原来的位置进行移动，在页面中占据的位置不会变。未脱离标准流，如果两个都设置相对定位的盒子元素，第二个层级高些，会覆盖第一个盒子，如果想改变覆盖方式，可以通过z-index改变层级。相对对位的主要作用是和绝对定位（absolute）一起使用（子绝父相），可以被left、right、top、bottom等属性影响

position: relative;
top:10px;
left:10px;

3、绝对定位（absolute）

绝对定位的元素会脱离标准流，会被left、right、top、bottom等属性影响，主要是相对于自己的父元素进行绝对定位，如果父元素未设置定位属性，则会一直向更高层级推进，如果所有层级都未设置定位属性则相对于根元素进行绝对定位，主要应用是配合相对定位（子绝父相），或者相对于根元素进行绝对定位

position: absolute;
top:10px;
left:10px;

4、固定定位（fixed）

固定定位脱离标准流，会被left、right、top、bottom等属性影响，可以通过z-index改变层级。和绝对定位差不多，不过绝对定位相对于的是父元素或者根元素，而固定定位则是相对于浏览器窗口定位，且不会随着滚动条滚动而滚动，固定定位的主要应用是固定表头，底部或者侧边栏等

position: fixed;
top:10px;
left:10px;
width：100%