css 相对定位

/* 相对定位示例 */

/* 1. 基础相对定位 */
.relative-box {
    position: relative;
    top: 20px; /* 相对于自身原来的位置向下移动20px */
    left: 30px; /* 相对于自身原来的位置向右移动30px */
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

/* 2. 相对定位与绝对定位结合使用 */
.parent-relative {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: lightcoral;
}

.child-absolute {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: lightgreen;
}

解释说明：

1. 基础相对定位：

   • position: relative;：元素的定位是相对于它在文档流中的原始位置。即使设置了 top、left 等属性，元素仍然占据其原始位置的空间。
   • top: 20px; 和 left: 30px;：将元素从其原始位置向下移动20px，向右移动30px。

2. 相对定位与绝对定位结合使用：

   • position: relative;：父元素设置为相对定位，使得子元素的绝对定位是相对于父元素而不是整个页面。
   • position: absolute;：子元素设置为绝对定位，它的定位基准是最近的已定位（relative, absolute, fixed）祖先元素。如果没有找到这样的祖先元素，则相对于初始包含块（通常是浏览器窗口）。