position在css中的用法

/* position 在 CSS 中的用法示例 */

/* 1. static (默认值) */
.static {
    position: static;
}
/* 解释：元素按照正常的文档流进行布局，position 属性的其他值（top, bottom, left, right）不会对其产生影响。 */

/* 2. relative */
.relative {
    position: relative;
    top: 10px;
    left: 20px;
}
/* 解释：相对定位。元素相对于其正常位置进行偏移，但仍然占据原来的空间。top 和 left 等属性用于指定偏移量。 */

/* 3. absolute */
.absolute {
    position: absolute;
    top: 50px;
    left: 100px;
}
/* 解释：绝对定位。元素相对于最近的已定位（非 static）祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）。 */

/* 4. fixed */
.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}
/* 解释：固定定位。元素相对于视口进行定位，即使页面滚动，元素位置也不会改变。 */

/* 5. sticky */
.sticky {
    position: sticky;
    top: 10px;
}
/* 解释：粘性定位。元素在跨越特定阈值前为相对定位，之后为固定定位。通常用于导航栏等需要在滚动到一定位置时固定的场景。 */