css 定位

/* 示例代码：使用 CSS 定位 */

/* 1. 相对定位 (relative) */
.relative {
    position: relative;
    top: 20px; /* 相对于自身原来的位置向下移动20px */
    left: 30px; /* 相对于自身原来的位置向右移动30px */
}

/* 2. 绝对定位 (absolute) */
.absolute {
    position: absolute;
    top: 50px; /* 相对于最近的已定位祖先元素的顶部50px */
    left: 100px; /* 相对于最近的已定位祖先元素的左边100px */
}

/* 3. 固定定位 (fixed) */
.fixed {
    position: fixed;
    bottom: 0; /* 固定在视窗底部 */
    right: 0; /* 固定在视窗右边 */
}

/* 4. 粘性定位 (sticky) */
.sticky {
    position: sticky;
    top: 10px; /* 当滚动到距离顶部10px时，元素会固定在顶部 */
}

解释说明：

• 相对定位 (relative)：元素相对于其正常位置进行偏移。它的偏移不会影响其他元素的布局。
• 绝对定位 (absolute)：元素相对于最近的已定位（非 static）祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）。
• 固定定位 (fixed)：元素相对于浏览器窗口进行定位，即使页面滚动，元素位置也不会改变。
• 粘性定位 (sticky)：结合了相对定位和固定定位的行为。当页面滚动到指定位置时，元素会“粘”在某个位置（如顶部）。