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值,可以实现对块元素的移动。