css定位

/* CSS 定位示例 */

/* 1. 静态定位 (static) */
/* 默认值，元素按照正常文档流进行布局，不接受 top, bottom, left, right 等属性的改变 */
.static {
    position: static;
}

/* 2. 相对定位 (relative) */
/* 元素相对其正常位置进行偏移，但不会脱离文档流 */
.relative {
    position: relative;
    top: 20px; /* 向下移动20px */
    left: 10px; /* 向右移动10px */
}

/* 3. 绝对定位 (absolute) */
/* 元素相对于最近的已定位（非 static）祖先元素进行定位，如果不存在则相对于初始包含块（通常是浏览器窗口） */
.absolute {
    position: absolute;
    top: 50px;
    left: 50px;
}

/* 4. 固定定位 (fixed) */
/* 元素相对于浏览器窗口进行定位，滚动页面时元素位置不变 */
.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

/* 5. 粘性定位 (sticky) */
/* 元素根据用户的滚动位置在相对定位和固定定位之间切换 */
.sticky {
    position: sticky;
    top: 0;
}

解释说明：

• 静态定位 (position: static)：这是默认的定位方式，元素按照正常的文档流进行布局，不能通过 top, bottom, left, right 等属性来调整位置。
• 相对定位 (position: relative)：元素相对于它原本的位置进行偏移，但仍然占据原来的空间，不会影响其他元素的布局。
• 绝对定位 (position: absolute)：元素相对于最近的已定位（非 static）祖先元素进行定位。如果没有找到这样的祖先元素，则相对于初始包含块（通常是浏览器窗口）。
• 固定定位 (position: fixed)：元素相对于浏览器窗口进行定位，即使页面滚动，元素位置也不会改变。
• 粘性定位 (position: sticky)：元素根据用户的滚动位置在相对定位和固定定位之间切换，常用于导航栏等需要在特定位置“粘住”的场景。