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

CSS相对定位和绝对定位详解

程序员文章站 2022-04-24 20:46:03
...

相对定位和绝对定位，不改变元素的大小形状，只改变元素的位置。

相对定位和绝对定位是通过position属性来控制的，position属性的值为下面几种：

值 描述
absolute 使元素绝对定位，相对于static定位以外的最近的一个祖先元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 使元素相对定位，相对于自己的正常位置进行定位。
fixed 使元素绝对定位，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

注：对于html的标准流(文档流)和浏览器怎么渲染各个DOM元素等底层知识，我不怎么清楚，下面的理解方式不一定正确，仅供参考。

相对定位

相对定位的参考点，是它自己定位(移动)之前的位置，不是相对于父节点，也不是相对于平级节点。

分析

我是分为两步来理解相对定位的，如下：
1、先不考虑position定位，按标准流将各个元素显示出来。
2、以元素自身的位置作为参考点，进行左右、上下移动进行定位。

如下图，最外面的虚线大框代表body，里面有3个div，不考虑定位时显示如下：
CSS相对定位和绝对定位详解
然后在上图的基础上考虑相对定位，如让div2向下20px，向右移动30px，这里div2移动的参考对象就是它自己没移动前的位置，如B点是相对于A点，类似于数学里的平面坐标系。如下图：
CSS相对定位和绝对定位详解

注：div2相对定位移动不影响div1和div3，由于div2并没有脱离标准流(文档流)，所以div2 原来的位置还保留着，div3并不会向上移动占用div2原来的位置，而且，相对定位移动之后，有可能会导致元素重叠，下面的验证例子会说明这一点。

验证

我们同样用3个div来说明，首先不考虑position相对定位，正常显示，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试相对定位和绝对定位</title>
    <style>
        div{
            width:50px;
            height: 50px;
        }
        .d1{
            background-color: blue;
        }
        .d2{
            background-color: aqua;
        }
        .d3{
            background-color: brown;
        }
    </style>
</head>
<body>
<div class="d1">div1</div>
<div class="d2">div2</div>
<div class="d3">div3</div>
</body>
</html>

正常情况下，3个div依次块状显示，运行效果如下：
CSS相对定位和绝对定位详解

现在我们给div2加上相对定位，增加样式position: relative;top: 20px;left: 30px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试相对定位和绝对定位</title>
    <style>
        div{
            width:50px;
            height: 50px;
        }
        .d1{
            background-color: blue;
        }
        .d2{
            background-color: aqua;
        }
        .d3{
            background-color: brown;
        }
    </style>
</head>
<body>
<div class="d1">div1</div>
<div class="d2" style="position: relative;top: 20px;left: 30px;">div2</div>
<div class="d3">div3</div>
</body>
</html>

效果图如下：
CSS相对定位和绝对定位详解

通过比较两幅效果图，总结如下：

  1. 相对定位的元素的参考对象是自己，即自己原来的所在位置(自己原来左上角作为坐标系的原点)。
  2. 相对定位移动后，之前的位置依旧保留，其他元素并不会占用。
  3. 相对定位后，有可能导致元素重叠。

绝对定位

描述

绝对定位的参考对象就不是自己了，而是最近的已设置了position的祖先元素，并且position不是static，而是absolute或者relative。首先看它的父元素是否设置了position为absolute或者relative，如果有就按父元素的左上角作为参考点，如果没有则再找祖父元素、曾祖父元素、高祖父元素，如果都没有就以页面文档的初始位置作为参考点。

绝对定位的元素是脱离标准流(文档流)的，即直接在标准流中删除，所以元素原来的位置会被占用。

由于绝对定位元素脱离的标准流，所以元素可以覆盖标准流中元素，也可以通过z-index设置层叠次序，z-index值越大越靠上层。如果把页面比作高楼，正常的元素都是在1层，绝对定位的元素在2层及以上，z-index越大所在层月高，越难被其他元素覆盖。

测试示例

1、没有绝对定位的情况，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试相对定位和绝对定位</title>
    <style>
        .d1, .d2, .d3 {
            width: 50px;
            height: 50px;
        }

        .p1 {
            width: 450px;
            height: 450px;
            border: 1px solid red;
        }

        .p2 {
            width: 380px;
            height: 380px;
            border: 1px solid blue;
        }

        .p3 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        .d1 {
            background-color: blue;
        }

        .d2 {
            background-color: aqua;
        }

        .d3 {
            background-color: brown;
        }
    </style>
</head>
<body>
<div class="p1">曾祖父<br><br>
    <div class="p2">祖父<br><br>
        <div class="p3">父<br><br>
            <div class="d1">div1</div>
            <div class="d2">div2</div>
            <div class="d3">div3</div>
        </div>
    </div>
</div>

</body>
</html>

运行效果：
CSS相对定位和绝对定位详解

通过上面可以看出，在没有使用绝对定位时，元素都是按标准流(文档流)正常显示的。

2、让div2绝对定位，它的所有祖先元素都没有设置position为absolute或者relative，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试相对定位和绝对定位</title>
    <style>
        .d1, .d2, .d3 {
            width: 50px;
            height: 50px;
        }

        .p1 {
            width: 450px;
            height: 450px;
            border: 1px solid red;
        }

        .p2 {
            width: 380px;
            height: 380px;
            border: 1px solid blue;
        }

        .p3 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        .d1 {
            background-color: blue;
        }

        .d2 {
            background-color: aqua;
        }

        .d3 {
            background-color: brown;
        }
    </style>
</head>
<body>
<div class="p1"  style="margin-top: 25px;margin-left: 10px">曾祖父<br><br>
    <div class="p2">祖父<br><br>
        <div class="p3">父<br><br>
            <div class="d1">div1</div>
            <div class="d2" style="position: absolute;top: 20px;left: 30px">div2</div>
            <div class="d3">div3</div>
        </div>
    </div>
</div>

</body>
</html>

运行效果：
CSS相对定位和绝对定位详解

可以看出，div2所有祖先元素都没设置position时，div2是把页面文档的初始位置作为原点参考对象进行移动的，不是根据父元素、祖父元素，也不是根据曾祖父元素。

3、祖先元素中有设置position为absolute或者relative时，则把最近的一个作为参考对象。

示例1：祖父元素设置了position为absolute，父元素设置position为static
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试相对定位和绝对定位</title>
    <style>
        .d1, .d2, .d3 {
            width: 50px;
            height: 50px;
        }

        .p1 {
            width: 450px;
            height: 450px;
            border: 1px solid red;
        }

        .p2 {
            width: 380px;
            height: 380px;
            border: 1px solid blue;
        }

        .p3 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        .d1 {
            background-color: blue;
        }

        .d2 {
            background-color: aqua;
        }

        .d3 {
            background-color: brown;
        }
    </style>
</head>
<body>
<div class="p1">曾祖父<br><br>
    <div class="p2" style="position: absolute;top: 60px;left: 60px">祖父<br><br>
        <div class="p3" style="position: static;top: 20px;left: 30px">父<br><br>
            <div class="d1">div1</div>
            <div class="d2" style="position: absolute;top: 20px;left: 30px">div2</div>
            <div class="d3">div3</div>
        </div>
    </div>
</div>

</body>
</html>

运行效果如下：
CSS相对定位和绝对定位详解

通过上图可以看出，div2的父元素设置了position: static,祖父元素设置了position: absolute,div2是以祖父元素为参考的，即相对于祖父元素进行移动定位。

示例2：div2曾祖父设置了position: absolute，祖父元素设置了position: relative，父元素设置了position: static

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试相对定位和绝对定位</title>
    <style>
        .d1, .d2, .d3 {
            width: 50px;
            height: 50px;
        }

        .p1 {
            width: 450px;
            height: 450px;
            border: 1px solid red;
        }

        .p2 {
            width: 380px;
            height: 380px;
            border: 1px solid blue;
        }

        .p3 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        .d1 {
            background-color: blue;
        }

        .d2 {
            background-color: aqua;
        }

        .d3 {
            background-color: brown;
        }
    </style>
</head>
<body>
<div class="p1" style="position: absolute;top: 40px;left: 100px">曾祖父<br><br>
    <div class="p2" style="position: relative;top: 20px;left: 60px">祖父<br><br>
        <div class="p3" style="position: static;top: 20px;left: 30px">父<br><br>
            <div class="d1">div1</div>
            <div class="d2" style="position: absolute;top: 20px;left: 30px">div2</div>
            <div class="d3">div3</div>
        </div>
    </div>
</div>

</body>
</html>

运行效果如下：
CSS相对定位和绝对定位详解

可以看出，div2多个祖先元素设置了position: absolute或者position: relative，是以最近的一个祖先元素为准。

综合上面的示例，总结如下：

  1. 绝对定位元素脱离正常流(文档流)，所以元素原来的位置会被其他元素占用。
  2. 因为绝对定位元素脱离了正常流，和相对元素一样也会有覆盖其他元素的情况。
  3. 绝对定位元素是相对于祖先元素，和相对定位不同，相对定位是相对于元素自己原来的位置。
  4. 绝对定位元素的祖先元素是设置的position: static，该祖先元素并不作为参考物。
  5. 绝对定位元素的祖先元素有多个都设置了position: absolute或position: relative ,那么是以最近的一个祖先元素作为参考物，即相对于最近的那一个祖先元素进行移动定位。
相关标签： css position absolute relative

上一篇： CSS - Position

下一篇： CSS深入理解之position定位

推荐阅读