一、定位的基础概念
在谈及CSS中的absolute和relative定位之前，我们先来了解一下CSS中的定位的基础概念。
CSS中的定位指的是根据元素在文档流中的位置，将元素放置在指定的位置上。常见的定位有三种：static、relative、和absolute。其中static是默认的定位方式，也就是元素在文档流中的位置不会发生变化，而relative和absolute则会触发定位。
不同的定位方式触发的定位是不同的，我们将在下面的内容中详细介绍。
二、relative定位详解
相对定位（relative）指的是元素相对于其在文档流中的位置进行定位。
相对定位会触发position属性，使元素成为定位元素。相对于该元素在文档流种的位置，通过 top、right、bottom、left 属性可以控制元素向上、右、下、左移动的距离。例如：
.box {
position: relative;
top: -20px;
left: 30px;
}
这样，.box元素向上移动20像素，向左移动30像素。
相对定位对其他元素的位置不会造成影响，其他元素和 .box 之间的距离不会改变。
三、absolute定位详解
绝对定位（absolute）指的是元素相对于最近的已经定位的祖先元素进行定位。
绝对定位会触发position属性，使元素成为定位元素。通过 top、right、bottom、left 属性可以控制元素相对于其已经定位的祖先元素的上、右、下、左移动的距离。例如：
.box {
position: absolute;
top: 20px;
left: 30px;
}
这样，.box元素相对于其已经定位的祖先元素向上移动20像素，向左移动30像素。
如果没有找到已经定位的祖先元素，则相对于文档定位。
四、absolute和relative的比较
absolute和relative的定位方式既有相同点，也有不同点。下面我们将二者进行比较：
1. 相同点
相同点在于二者都可以设置top、right、bottom、left属性来改变元素的位置。
2. 不同点
不同点在于二者不同的定位方式，导致改变其他元素的位置的方式不同。relative定位的元素移动改变了周围元素的位置，而absolute定位的元素不会影响周围元素的位置
五、小结
CSS中的绝对定位（absolute）和相对定位（relative）分别相对于已经定位的祖先元素和文档定位，它们能够控制元素位置，并且存在不同的定位方式。需要注意的是，relative定位会改变其他元素的位置，而absolute定位则不会。
代码实例：
我是一个相对定位的元素
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/245283.html
微信扫一扫 
支付宝扫一扫 