css当中的相对定位和绝对定位

在 CSS 中，有两种定位方式，分别是相对定位和绝对定位。他们可以在网页中对元素的定位起到关键的作用。

相对定位（Relative Positioning）：相对定位，指元素的定位是相对于元素在正常文档流中的位置来计算的，即通过指定上下左右的偏移量来确定元素的位置。

div {
    position: relative;
    left: 50px;
    top: 50px;
}

在上述代码中，通过 position 属性来指定了元素为相对定位，同时通过 left 和 top 属性指定了元素相对于其实际位置向右和向下各偏移了 50px。

绝对定位（Absolute Positioning）：绝对定位，指元素的定位不再是相对于文档流中的位置，而是相对于其最近的已定位祖先元素来计算的，如果没有已定位的祖先元素，那么就相对于 body 元素来定位。

div {
    position: absolute;
    left: 50px;
    top: 50px;
}

在上述代码中，通过 position 属性来指定了元素为绝对定位，同时通过 left 和 top 属性指定了元素相对于其最近已定位祖先元素的左侧和顶部各偏移了 50px。

需要注意的是，当元素被设置为绝对定位时，其会被完全从文档流中移出，不会再对其他元素产生影响。