position的relative、fixed、absolute的三种方法使用

position的使用

fixed

为固定定位，脱离文档流，主要以浏览器窗口大小来进行定位，简单来说，就是它的父元素只能看做是浏览器窗口。如我们经常看到的广告弹窗就是以浏览器界面的大小定位的。

relative

为相对定位，不脱离文档流，以父元素标签为参考，来进行相对定位，会随着父元素的位置改变而发生位置变化。

absolute

为绝对定位，脱离文档流，以父元素标签为参考，来实现绝对定位，简单来说就是，即是父元素发生变化，它自身也不会发生如何变化。如div中需要固定的左上角设置一个图案，你就可以用absolute。

总结

这里主要是：你首先要清楚你的demo是依赖于浏览器窗口还是父元素，再来判断它是否需要伴随父元素的位置改变而需要改变。

1. 如果是依赖浏览器窗口，则就不会选用relative；如果依赖于父元素，则就不选择fixed;
2. 如果需要依赖父元素变化而变化，则就选择relative；如果不需要，则就选择absolute。

注意：

确定好参照物是什么