我们前端经常开发中会遇到定位的问题，因为当前的图层被遮挡，或者需要突破盒子div的束缚，再者悬浮到页面的左右；对于一些初学者来说就不知道怎么用了，明明我想定位到这个地方，结果找不到元素了？

的确，处理以上问题我们就需要先弄明白，css中定位中的absolute和fixed以及relative区别！

relative:相对定位，相对于其父级的定位、或者上一层的位置而言；为什么html会有默认的布局，从做往右，从上向下，你也可以这样理解，所有的盒子都会继承其父级的属性，然后如果html/body有这个一个相对定位的默认属性，那整个页面就会自动排列了；

absolute:绝对定位，相对于其父级的定位，假设父级没有定位，继承了祖父的属性，那么absolute就是相对于其祖父的定位，甚至可以追踪到html/body作为相对参考对象，这个就是为什么你用了绝对定位，却找不到元素的原因了！

fixed：固定定位，相对于浏览器的视图边框，也就是html/body，我们经常用的悬浮窗口，左右对联式窗口，需要利用position：fixed;实现页面的固定，无论浏览器怎么滚动，窗口就在这个位置！！！

有时也会多个配合使用，例如：

1、父级盒子用了：relative，里面的子元素用了absolute，这样的话，这个子元素是相对于父级元素的，relative和absolute配合经常用到banner轮播图的布局中，实现上下层次；

2.父级盒子用：relative，里面的元素用了fixed，对比这个例1，fixed的会在父级盒子内固定到一处不会动，页面不会滚动的话，和例1没有任何区别，不过，如果这个父级盒子设置溢出滚动：overflow,overflow-x,overflow-y,那么就不一样了，用了例1的会跟着滚动而消失，而用fixed还会固定到这个盒子的这个位置，页面滚动和它无关，谁都无法改变；

另外，对于绝对定位和固定定位，还有四个属性，非常好玩：top(上),left(左),right(右),bottom(下)

例如：做一个右边的对联式悬浮，离右边浏览器边框10px，离浏览器底部20px；就可以这样写(如下)，这样的话，就会被固定到页面的右下角 

position:fixed;
right:10px;
bottom:20px;

好了，有不懂的可以评论回复我，可以给你们写案例！