欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

position absolute相关知识点

程序员文章站 2022-04-24 20:45:51
...

前言

最近再看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;
}

效果:
position absolute相关知识点

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

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

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

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

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

left/right同时设置

在示例代码中添加:

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

效果:
position absolute相关知识点

正如所料:

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

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

top/left/right/bottom同时设置

在示例代码基础上添加:

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

效果:
position absolute相关知识点

从上面效果可以看出:

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

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

在示例代码基础上添加:

.child {
    position: absolute;
}

效果:
position absolute相关知识点

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

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

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

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

效果:
position absolute相关知识点

效果跟上面的一样,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;
}

效果:
position absolute相关知识点

当只设置top时:

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

当只设置left时:
效果:
position absolute相关知识点

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

数值带来的问题

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

  • 负值
  • 正值

设置负值的情况

还是在示例代码上添加:

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

效果:
position absolute相关知识点

从上图可见:

当同时设置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%
position absolute相关知识点

left: 0 right:50%
position absolute相关知识点

left: 0 right: 10%
position absolute相关知识点

从上面设置不同值来看:

当同时设置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来实现定位效果