浅析前端定位position

A.有关position在实际应用中遇到最多的是relative(相对),absolute(绝对)

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

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

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

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

比如下面一张图:

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

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

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

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

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

猜你喜欢

转载自www.cnblogs.com/b-code/p/9334822.html