css position用法

/* CSS position 属性用于指定一个元素的定位方式 */

/* 1. static (默认值) */
/* 元素按照正常文档流进行布局，不会受到 top, bottom, left, right 影响 */
div.static {
  position: static;
  border: 1px solid red;
}

/* 2. relative */
/* 相对定位：元素相对于它原本的位置进行偏移，但仍然占据原来的空间 */
div.relative {
  position: relative;
  top: 30px;
  left: 30px;
  border: 1px solid blue;
}

/* 3. absolute */
/* 绝对定位：元素相对于最近的已定位（非 static）祖先元素进行定位，如果不存在这样的祖先，则相对于初始包含块（通常是视口） */
div.absolute {
  position: absolute;
  top: 60px;
  right: 0;
  border: 1px solid green;
}

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

/* 5. sticky */
/* 粘性定位：元素在跨越特定阈值前为相对定位，之后为固定定位 */
div.sticky {
  position: sticky;
  top: 15px;
  border: 1px solid purple;
}