浅析前端定位position

A.有关position在实际应用中遇到最多的是relative（相对），absolute（绝对）

一般来说我们布局的话势必会离不开这个属性，当然也有人会问到有margin和padding,float不就已经够了么，其实在一开始初期设计页面的时候，我也是用这些属性，也很方便，让它向左就不可能会向右。

B.但是在慢慢的使用过程中就会渐渐的发现，使用margin-left系列的东西时候会影响到兄弟节点的位置，是故未能按照自己的要求去实现某些业务，一般相对简单的定位我会选择这个，因为简单方便易懂。相对复杂些的我会使用position的相对绝对定位。

下面主要介绍这个定位的详情（关于文档流的概念）

这里我们要先理解脱离文档流的概念，其实也就相当于浮在某层上面，想必大家对z-index有点概念，也就大差不差这意思。

比如下面一张图：

看这图估计就能理解这两个之前的概念了，好比框2、3他们属性是absolute，那样的话它会一直往前找，直到找到父节点第一个属性为relative的所以它们设置的top,left之类的都是针对第一个框的。第五个框的是相对第四个的相对定位。

1. Position没写的话默认是static 没有定位，元素出现在正常的流中.

还有个fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定.

所以在我们设计页面的时候，应该先把每个模块看成盒子，然后再进行位置的固定，如下图布局的实际应用：

原文地址：https://www.cnblogs.com/b-code/p/9334822.html