CSS 相对定位 - 绿叶网

CSS 相对定位语法

CSS 相对定位是一种布局定位技术。所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。

在 CSS 中，我们可以使用 position: relative; 来实现元素的相对定位。

语法：

position: relative;
top: 数值;
bottom: 数值;
left: 数值;
right: 数值;

说明：

position: relative; 也是结合 top、bottom、left 和 right 这 4 个属性一起使用的，其中，position: relative; 使得元素成为相对定位元素，接着使用 top、bottom、left 和 right 这 4 个属性来设置元素相对原始的位置。

同样地，top、bottom、left 和 right 这 4 个属性不一定全部都用到，一般只会用到其中两个。

注意: 在默认情况下，固定定位元素的位置是相对浏览器而言，而相对定位元素的位置是相对于原始位置而言。

CSS 相对定位示例

接下来，我们通过一个简单的例子来讲解 CSS 相对定位是如何使用的。

示例：使用 CSS 相对定位

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #father {
            margin-top: 30px;
            margin-left: 30px;
            border: 1px solid silver;
            background-color: skyblue;
        }
        #father div {
            width: 100px;
            height: 60px;
            margin: 10px;
            background-color: hotpink;
            border: 1px solid white;
        }
        #son2 {
            /* 这里设置 son2 的定位方式 */
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">第1个无定位的div元素</div>
        <div id="son2">相对定位的div元素</div>
        <div id="son3">第2个无定位的div元素</div>
    </div>
</body>
</html>

页面效果如下图所示。

没有加入相对定位

分析：

我们为第 2 个 div 元素加入相对定位，CSS 代码如下：

#son2 {
    position: relative;
    top: 20px;
    left: 40px;
}

再次运行后，页面效果如下图所示。

加入相对定位

分析：

从这个例子可以看出，相对定位元素的 top 和 left 是相对于该元素原始位置而言的，这一点跟固定定位是不一样的。具体来说，top: 20px; 将元素向下移动 20 像素，而 left: 40px; 将元素向右移动 40 像素，移动的基准是元素未设置定位时的默认位置。

此外，相对定位的元素不会脱离文档流，它原来所在的位置依然会被保留，后续元素不会顶上来。

在 CSS 相对定位中，top、right、bottom、left 这 4 个属性，我们也是只需要其中两个属性就可以确定一个元素的相对位置。