position absolute相关知识点

前言

最近再看position相关知识点，发现有许多以前没有注意到的细节知识点，有不小的收获，本文就position absolute使用详细分析下。

具体分析

position是CSS中比较重要的一个属性，常用于页面布局，它的值有4个：

• static：默认文档流
• relative: 相对定位，相对于自身位置
• absolute：绝对定位，相对于非static父元素进行定位，脱离文档流
• fixed：固定定位，脱离文档流

这是CSS常见知识点，这里顺便提一笔，本文主要讲的是absolute的使用，实际上是根据top/left/right/bottom的使用具体分为下面几种情形：

• 同时设置top、bottom
• 同时设置left、right
• 只设置top、left、right、bottom中的一个
• 不设置top、left、right、bottom中任意一个

示例代码公共部分

HTML部分

<div class="parent">
    parent
    <div class="child">child</div>
</div>

CSS部分

    html,
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .parent {
      width: 300px;
      height: 200px;
      text-align: center;
      border: 1px solid #ddd;
    }
    .child {
      text-align: center;
      background: rgba(0,0,0,.5);
    }

top/bottom同时设置

top或bottom只设置一个，只是一般的使用，如果同时设置top/bottom会发生什么呢？
在上面示例代码中添加：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
}

效果：

从上图以及代码中可提出一个问题：

child部分明明没有设置高度，没什么100%了?

这就是同时设置top/bottom的效果：

同时设置top/bottom, 在垂直方向上会铺满父元素

那么是不是可以依次类推，同时设置left/right会不会在水平方向上铺满父元素？

left/right同时设置

在示例代码中添加：

.child {
  left: 0;
  right: 0;
}

效果：

正如所料：

同时设置left、right会在水平方向上铺满容器，其功能

那么如果top/left/right/bottom同时设置，那有是何效果呢？

top/left/right/bottom同时设置

在示例代码基础上添加：

.child {
    top： 0;
    left: 0;
    right: 0;
    bottom: 0;
}

效果：

从上面效果可以看出：

同时设置top/left/right/bottom，会在水平和垂直方向铺满父元素

top/bottom/left/right不设置任何一个

在示例代码基础上添加:

.child {
    position: absolute;
}

效果：

上面的效果乍一看没什么，实际上上面的效果是有问题的，问题在哪呢？

child区域没有在parent区域的最上角，就好像child区域没有脱离文档流一样

修改下示例，让这个效果跟明显，把parent中的position: relative去除

.parent {
   position: relative； // 除去这个属性
}

效果：

效果跟上面的一样，absolute是相对于非static父元素的定位的，这里html、body、parent都没有设置relative。

这就是都不设置top/left/right/bottom的效果：

当不设置top/left/right/bottom中任意一个，效果就是保持在原先位置不动，类似于relative相对定位效果

设置top/left/right/bottom其中一个

当只设置top时：

.child {
    position: absolute;
    top: 0;
}

效果：

当只设置top时：

效果和设置top：0 left： 0效果相同，定位在左上角

当只设置left时：
效果：

当只设置left时效果和不设置任何top/left/right/bottom效果相同

数值带来的问题

这样的情况实际上在同时设置top/left ，同时设置bottom/right、同时设置top/left/right/bottom应用的比较多。上面的示例中都是设置为0，实际上根据数值还可分为下面几种情况：

• 负值
• 正值

设置负值的情况

还是在示例代码上添加：

.child {
    top： -12px;
    bottom: -12px;
}

效果：

从上图可见：

当同时设置top/bottom为负值时，实际上垂直方向上的高度就是 100% + top的绝对值 + bottom绝对值

同理：同时设置left/right 和同时设置top/left/right/bottom都是类似的计算

上面的都是top/bottom，left/right都是相同值得情况，如果是不同值会是什么样的效果呢？

这里就以同时设置left/right为例，看看下面三种情况的效果：

• left: 0 right: 80%
• left: 0 right: 50%
• left: 0 right: 10%

效果图：
left: 0 right: 80%

left: 0 right:50%

left: 0 right: 10%

从上面设置不同值来看：

当同时设置left/right值时，child在parent水平方向上就好像一个弹簧
left: 0 right: 0，弹簧自然伸展
left: 0 right: 10%, 弹簧从后向左压缩10%
依次类推
left: 0 right: 100%，弹簧从右向左压缩100%，即无长度

当top/bottom同时设置时，亦是如此。
可以利用这个特性实现类似进度条的效果，可以查考按钮样式，这里有一种样式就是利用该特性实现的。

总结

就目前了解的，position absolute的使用点有如下几种：

• 同时设置top/left/right/bottom，实现铺满父容器
• 同时设置top/bottom，在垂直方向上铺满父容器
• 同时设置left/right，在水平方向上铺满父容器
• 不设置top/left/right/bottom, 无需设置父元素relative，使用margin来实现定位效果