CSS中relative属性如何应用于元素定位？

本文共计859个文字，预计阅读时间需要4分钟。

在CSS中，使用`relative`的语法是`position: relative;`。`relative`表示相对定位，即元素会相对于其正常位置进行定位。如果对一个元素进行相对定位，它将出现在其原始位置上，但可以通过设置垂直或水平位置来改变其相对于其正常位置的位置。这样，元素就会相对于其原始位置进行定位。

在css中，relative的用法是“position:relative”。relative代表相对定位，如果对一个元素进行相对定位，它将出现在它所在的位置上；可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

首先我们来简单看一下relative（相对）定位的概念

根据W3C上的定义我们可以知道相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

简而言之，设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。