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

来源：互联网发布：淘宝客服介入能退款吗编辑：程序博客网时间：2024/05/18 10:30

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

相对定位和绝对定位是通过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，不考虑定位时显示如下：
这里写图片描述
然后在上图的基础上考虑相对定位，如让div2向下20px，向右移动30px，这里div2移动的参考对象就是它自己没移动前的位置，如B点是相对于A点，类似于数学里的平面坐标系。如下图：

注：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依次块状显示，运行效果如下：
这里写图片描述

现在我们给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>

效果图如下：
这里写图片描述

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

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

绝对定位

描述

绝对定位的参考对象就不是自己了，而是最近的已设置了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>

运行效果：
这里写图片描述

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

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>

运行效果：
这里写图片描述

可以看出，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>

运行效果如下：
这里写图片描述

通过上图可以看出，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>

运行效果如下：
这里写图片描述

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

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

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

阅读全文

0 0