css的position

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

/* static (默认值) */
.static {
  position: static;
}

/* relative */
.relative {
  position: relative;
  top: 20px; /* 相对于自身原来的位置偏移 */
  left: 10px;
}

/* absolute */
.absolute {
  position: absolute;
  top: 50px; /* 相对于最近的非 static 定位祖先元素偏移 */
  right: 0;
}

/* fixed */
.fixed {
  position: fixed;
  bottom: 0; /* 固定在视口底部 */
  right: 0;
}

/* sticky */
.sticky {
  position: sticky;
  top: 10px; /* 当滚动到指定位置时，变为固定定位 */
}

解释说明：

• static：这是默认值，元素按照正常文档流进行布局，不会受到 top、bottom、left、right 等属性的影响。
• relative：相对定位，元素相对于它原本的位置进行偏移，但仍然占据原来的空间。
• absolute：绝对定位，元素相对于最近的非 static 定位的祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是浏览器窗口）。
• fixed：固定定位，元素相对于浏览器窗口进行定位，即使页面滚动，元素也不会移动。
• sticky：粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位。通常用于导航栏等需要“吸附”效果的场景。