css如何将块元素移动

CSS是一种强大的样式表语言，能够通过各种属性来控制HTML文档中的元素。其中一个重要的属性就是position，它决定一个元素在文档中的位置。我们可以用它来移动块元素。

/* 偏移值为相对于元素的左上角 */
/* 静态定位，元素按照文档流排列，不受top、bottom、left、right的影响 */
.static {
  position: static;
}

/* 相对定位，元素按照文档流排列，偏移值相对于自己原先的位置 */
.relative {
  position: relative;
  top: 10px; /* 向下平移10像素 */
  left: 20px; /* 向右平移20像素 */
}

/* 绝对定位，元素脱离文档流，偏移值相对于最近的已定位祖先元素 */
.absolute {
  position: absolute;
  top: 50px; /* 距顶部50像素 */
  right: 100px; /* 距右侧100像素 */
}

/* 固定定位，元素固定在屏幕上，偏移值相对于窗口 */
.fixed {
  position: fixed;
  top: 0; /* 距顶部0像素 */
  right: 0; /* 距右侧0像素 */
}

以上代码演示了position属性的四个值：static（默认）、relative、absolute和fixed。使用这些值加上相应的top、bottom、left、right值，可以实现对块元素的移动。