相对定位和绝对定位，不改变元素的大小形状，只改变元素的位置。
相对定位和绝对定位是通过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元素等底层知识，我不怎么清楚，下面的理解方式不一定正确，仅供参考。
相对定位
相对定位的参考点，是它自己定位(移动)之前的位置，不是相对于父节点，也不是相对于平级节点。
分析
注：div2相对定位移动不影响div1和div3，由于div2并没有脱离标准流(文档流)，所以div2 原来的位置还保留着，div3并不会向上移动占用div2原来的位置，而且，相对定位移动之后，有可能会导致元素重叠，下面的验证例子会说明这一点。
验证
我们同样用3个div来说明，首先不考虑position相对定位，正常显示，代码如下：
<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>现在我们给div2加上相对定位，增加样式position: relative;top: 20px;left: 30px;
<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、没有绝对定位的情况，代码如下：
<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，代码如下：
<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
代码如下：
<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
<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,那么是以最近的一个祖先元素作为参考物，即相对于最近的那一个祖先元素进行移动定位。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/198937.html原文链接：https://javaforall.net
