css定位方式有哪几种

/* CSS定位方式主要有以下几种： */

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

/* 2. 相对定位 (relative) */
/* 元素相对于其正常位置进行定位，移动该元素不会影响其他元素的位置。 */
div.relative {
    position: relative;
    top: 20px; /* 向下移动20px */
    left: 30px; /* 向右移动30px */
}

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

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

/* 5. 粘性定位 (sticky) */
/* 元素在页面滚动时根据指定的阈值进行切换，表现为相对定位和固定定位的结合。 */
div.sticky {
    position: sticky;
    top: 10px; /* 当元素滚动到距离顶部10px时，变为固定定位 */
}