css position

/* 示例代码：使用 CSS position 属性 */

/* 1. static (默认值) */
div.static {
  position: static;
  /* 不会对元素进行特殊定位，遵循正常的文档流 */
}

/* 2. relative */
div.relative {
  position: relative;
  top: 20px;
  left: 30px;
  /* 相对于自身原本的位置进行偏移 */
}

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

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

/* 5. sticky */
div.sticky {
  position: sticky;
  top: 10px;
  /* 在指定的阈值内表现为相对定位，当滚动超过该阈值时变为固定定位 */
}

解释说明：

• static：这是默认的定位方式，元素按照正常的文档流进行布局，不会受到 top、bottom、left、right 等属性的影响。
• relative：相对定位，元素相对于它在正常文档流中的位置进行偏移，但仍然占据原来的空间。
• absolute：绝对定位，元素脱离正常文档流，相对于最近的已定位（非 static）祖先元素进行定位。如果祖先元素没有定位，则相对于初始包含块（通常是视口）。
• fixed：固定定位，元素相对于浏览器窗口进行定位，即使页面滚动，元素位置也不会改变。
• sticky：粘性定位，元素在页面滚动到指定的阈值之前表现为相对定位，超过阈值后表现为固定定位。