css相对定位和绝对定位详解区别_h5绝对定位和相对定位

css相对定位和绝对定位详解区别_h5绝对定位和相对定位相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置。相对定位和绝对定位是通过position属性来控制的,position属性的值为下面几种:值描述absolute使元素绝对定位,相对于static定位以外的最近的一个祖先元素进行定位。元素的位置通过“left”,“top”,“right”以及“bottom”属性进行规定。relative使元素相

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

相对定位和绝对定位是通过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;

此代码由Java架构师必看网-架构君整理
<!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>

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

通过比较两幅效果图,总结如下:

  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>

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

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

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

此代码由Java架构师必看网-架构君整理
<!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,是以最近的一个祖先元素为准。

综合上面的示例,总结如下:

  1. 绝对定位元素脱离正常流(文档流),所以元素原来的位置会被其他元素占用。
  2. 因为绝对定位元素脱离了正常流,和相对元素一样也会有覆盖其他元素的情况。
  3. 绝对定位元素是相对于祖先元素,和相对定位不同,相对定位是相对于元素自己原来的位置。
  4. 绝对定位元素的祖先元素是设置的position: static,该祖先元素并不作为参考物。
  5. 绝对定位元素的祖先元素有多个都设置了position: absoluteposition: relative ,那么是以最近的一个祖先元素作为参考物,即相对于最近的那一个祖先元素进行移动定位。
本文来源gnail_oug,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/210428
0

发表评论