CSS相对定位和绝对定位

2022-07-19 08:59:48

CSS相对定位和绝对定位

文章参考进行了一定修改添加

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

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

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

相对定位

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

相对定位的元素，通过 left、right 属性来定义水平偏移量，top、bottom 属性来定义垂直偏移量。left 表示相对于原本位置的左外边界右移的距离，right 表示相对于原本位置的右外边界左移的距离，top 表示相对于原本位置的上外边界下移的距离，bottom 表示相对于原本位置的下外边界上移的距离。并且，偏移量可以是正值，也可以是负值，负值表示向相反的方向移动。

left、right、top、bottom 这 4 个属性的值，可以是长度值（可以是绝对单位或相对单位），也可以是百分比。使用百分比时，水平偏移量根据其父元素 width 属性的值计算得到，垂直偏移量根据其父元素 height 属性的值计算得到。需要注意的是，在设置偏移时，如果父元素没有显式定义 height 属性，就等同于 height 属性的值为 0。

在没有使用定位时

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
        div{
            height:50px;
            width:50px;}.d1{
            background-color: red;}.d2{
            background-color: green;}.d3{
            background-color: blue;}</style></head><body><divclass="d1">div1</div><divclass="d2">div2</div><divclass="d3">div3</div></body></html>

在这里插入图片描述
接下来我们对div2使用相对定位，增加样式position: relative;top: 20px;left: 30px;

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
        div{
            height:50px;
            width:50px;}.d1{
            background-color: red;}.d2{
            background-color: green;
            position: relative;
            top:20px;
            left:30px;}.d3{
            background-color: blue;}</style></head><body><divclass="d1">div1</div><divclass="d2">div2</div><divclass="d3">div3</div></body></html>

在这里插入图片描述
相对于原来的位置向右移动30px向下移动20px（距离原位置顶部20px，左部30px）

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

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

绝对定位

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
父级有定位，则看父级，父级没有定位，则继续向上找父级，实在找不到的话，就浏览器对齐

没有父盒子

没有父盒子时父盒子就是浏览器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*消除浏览器内外边距*/*{
            margin:0;
            padding:0;}.alone{
            width:300px;
            height:300px;
            background-color: blueviolet;/* 绝对定位：距离顶部100px，距离左边100px */
            position: absolute;
            top:100px;
            left:100px;}</style></head><body><divclass="alone"></div></body></html>

距离顶部100px，距离左边100px
在这里插入图片描述

有父盒子时

当父盒子没有设置定位时，继续向上级找父级，都没有的话还是和浏览器对齐

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{
            margin:0;
            padding:0;}.father{
            width:500px;
            height:500px;
            margin-top:150px;
            margin-left:150px;
            background-color: beige;}.alone{
            width:300px;
            height:300px;
            background-color: blueviolet;/* 绝对定位：距离顶部0px，距离右边0px */
            position: absolute;
            top:100px;
            left:100px;}</style></head><body><divclass="father"><divclass="alone"></div></div></body></html>

这个例子中父容器没有定位（默认static定位），继续向父级查找，没有父级，因此还是和浏览器对齐
在这里插入图片描述
当父盒子有定位时，相对于父盒子定位

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{
            margin:0;
            padding:0;}.father{
            position: relative;
            width:500px;
            height:500px;
            margin-top:150px;
            margin-left:150px;
            background-color: beige;}.alone{
            width:300px;
            height:300px;
            background-color: blueviolet;/* 绝对定位：距离顶部0px，距离右边0px */
            position: absolute;
            top:100px;
            left:100px;}</style></head><body><divclass="father"><divclass="alone"></div></div></body></html>

在这里插入图片描述

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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
        div{
            height:50px;
            width:50px;}

        section{
            position: relative;
            background-color: aqua;}.d1{
            background-color: red;}.d2{
            background-color: green;
            position: absolute;
            top:20px;
            left:30px;}.d3{
            background-color: blue;}</style></head><body><section><divclass="d1">div1</div><divclass="d2">div2</div><divclass="d3">div3</div></section></body></html>

在这里插入图片描述
由图可以看出，在父容器使用非static定位，div2中使用绝对定位时，div2原本的位置被删除，div2相对于父容器section进行定位。

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

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