相对定位示例

创作时间:

作者:

@小白创作中心

相对定位示例

引用

来源

https://developer.aliyun.com/article/1496976

在Web前端开发中，CSS定位是实现页面布局的重要手段。相对定位、绝对定位和固定定位是三种常用的定位方式，它们各有特点和适用场景。本文将详细解析这三种定位方式的区别，并通过具体代码示例帮助读者更好地理解它们的应用。

1. 相对定位（Relative Positioning）

相对定位是基于元素在文档流中原本的位置进行定位的一种方式。通过设置元素的
position: relative;
属性，然后使用
top
,
right
,
bottom
,
left
属性来指定相对于其原本位置的偏移量。具体特点包括：

元素仍然占据文档流中的位置，但是在布局时会根据设置的偏移量进行移动。
偏移量的计算方式是相对于元素自身原本的位置。
相对定位不会影响其他元素的位置，其他元素仍然会根据原本的位置进行布局。

示例代码：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位示例</title>
    <style>
        .relative {
            position: relative;
            top: 20px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div class="relative">
        这是一个相对定位的元素。
    </div>
    <div>
        这是一个普通的元素。
    </div>
</body>
</html>

在上面的示例中，
.relative
类被应用于一个
<div>
元素，使其相对于原本位置向下移动了 20px，向左移动了 30px。

2. 绝对定位（Absolute Positioning）

绝对定位是相对于元素的最近的已定位祖先元素进行定位的一种方式。通过设置元素的
position: absolute;
属性，并指定
top
,
right
,
bottom
,
left
属性来确定元素相对于其祖先元素的位置。如果没有已定位的祖先元素，则相对于最初的包含块（通常是
<body>
元素）进行定位。具体特点包括：

元素从文档流中脱离，不再占据原本的位置，而是根据其定位方式进行绝对定位。
定位的基准点是距离最近的已定位祖先元素的边缘。
绝对定位会影响其他元素的布局，因为元素从文档流中移出，不再占据空间。

示例代码：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位示例</title>
    <style>
        .container {
            position: relative;
            height: 200px;
        }
        .absolute {
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="absolute">
            这是一个绝对定位的元素。
        </div>
    </div>
    <div>
        这是一个普通的元素。
    </div>
</body>
</html>

在上面的示例中，
.container
类被应用于一个
<div>
元素，其中包含一个绝对定位的子元素
.absolute
。
.absolute
元素相对于
.container
定位，距离顶部和左侧分别为 50px。

3. 固定定位（Fixed Positioning）

固定定位是相对于浏览器窗口进行定位的一种方式。通过设置元素的
position: fixed;
属性，并指定
top
,
right
,
bottom
,
left
属性来确定元素相对于浏览器窗口的位置。具体特点包括：

元素从文档流中脱离，不再占据原本的位置，而是相对于浏览器窗口进行固定定位。
元素会随着页面滚动而保持在相对于浏览器窗口的固定位置。
固定定位不会影响其他元素的布局，因为元素从文档流中移出，不再占据空间。

示例代码：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位示例</title>
    <style>
        .fixed {
            position: fixed;
            top: 20px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div class="fixed">
        这是一个固定定位的元素。
    </div>
    <div>
        这是一个普通的元素。
    </div>
</body>
</html>

在上面的示例中，
.fixed
类被应用于一个
<div>
元素，使其固定在浏览器窗口的左上角，距离顶部和左侧分别为 20px 和 30px。