1

相信学过CSS的同学都曾经对于position的各种属性很困惑,尤其是absolute和relative定位,简直就是傻傻分不清,笔者写这篇文章就是希望通过代码实验的方式来揭露absolute和relative定位的本质区别。

一、默认定位

HTML结构如下:<h1>和<h2>是为了与窗口的顶部隔开距离便于观察,neighboor和child2的div是为了对比位置,我们真正需要定位的焦点放在了child1的div上。

<h1>Position Attribute</h1>
<h2>Relative & Absolute</h2>
<div class="container">
  <div class="neighboor"></div>
  <div class="parent">
      <div class="child1"></div>
      <div class="child2"></div>
    </div>
</div>

CSS如下:

.parent{
    background-color: yellow;
    height: 200px;
    width: 200px;
    display: inline-block;
}

.child1{
    background-color: green;
    height: 100px;
    width: 100px;
}

.child2{
    background-color: royalblue;
    height: 50px;
    width: 50px;
}

.neighboor{
    background-color: pink;
    height: 200px;
    width: 200px;
    display: inline-block;
}

我们来看一下默认定位的效果(特意留出地址栏方便观察位置对比)

clipboard.png

二、relative定位

首先我们来看一下官方的解释:生成相对定位的元素,相对于其正常位置进行定位。我们来尝试一下在child1中加入relative定位,并且辅以top和left位移值:

.child1{
    background-color: green;
    height: 100px;
    width: 100px;
    position: relative;
    top: 20px;
    left: 20px;
}

效果如下:

clipboard.png

我们看到绿色方块代表的child1和原来的位置相比top和left偏移了,但是其他的div都安分守己地待在原处,就好像child1的位移并没有对它们造成任何影响。

所以我们总结relative定位:
1.相对于元素原来的位置进行相应的位移;
2.其他元素的位置并不受影响,也就是说被定位的元素原来的位置还存在占位,并没有释放。

三、absolute定位

首先我们还是来看一下官方的解释:生成绝对定位的元素,相对于默认定位以外的第一个父元素进行定位。我们尝试一下在child1中加入absolute定位:

.child1{
    background-color: green;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 20px;
    left: 20px;
}

我们看到效果如下:

clipboard.png

我们观察到,绿色块代表的child1是相对于浏览器视口进行了位移,而且它原来所占的位置被释放掉,被紫色块代表的child2给占领了。这里我们容易得到absolute和relative最重要的一个区别:relative定位不释放原来所占的位置,absolute定位释放原来所占的位置。还有个悬而未决的地方,就是absolute定位到底相对于谁进行位移的,在我们刚刚的试验中,“貌似”是相对于浏览器视口进行偏移的,但是事实真的如此吗?我们来研究一下官方的那句定义“相对于默认定位以外的第一个父元素进行定位”。在我们刚刚的试验中,parent、container、body都是chidl1的父元素,但是parent和container都是默认定位,所以“默认定位以外的第一个父元素”就是body元素了。那现在我们给parent进行relative定位(这里不需要设置LTRB偏移值,只是消除parent的默认定位属性),看到结果如下:

clipboard.png

果然如和我们所料,这个时候“默认定位以外的第一个父元素”就是parent了,所以这次child1是相对于黄色块代表的div进行偏移的,而由于它释放了原来所占的位置,紫色块代表的div2就占领了它的位置。

总结一下absolute定位:

  1. 相对于谁进行定位有点复杂:就是找出定位元素父元素链上的所有父元素,由近到远哪个元素不是默认定位(即static定位)的,那么就相对于它进行定位。
  2. 定位元素会释放原来所占的位置,其他元素会补充进来,好似float属性让其漂浮起来一样。
  3. 当父元素链上所有父元素都是默认定位,那么absolute定位就是相对于body元素的,效果和fix定位差不多。

相信通过以上的代码实现探究,大家已经对absolute和relative定位有了更深刻的认识,其实只要把握两点:1.相对于谁定位 2.是否释放原来的位置(比较官方的说法是“文档流位置”)就足以应付大多数情况了,以后应该不会再对它们傻傻分不清了吧:)


魔法博士
220 声望11 粉丝

前端攻城狮一枚