CSS position 相对定位和绝对定位用法详解附代码示例

itomcoil 2025-02-04 14:23 18 浏览

css中的相对定位和决定定位总是让人很难区分，今天一文讲清楚

CSS 中的定位属性允许你控制元素在页面上的位置。主要有三种定位方式：static、relative 和 absolute。其中，相对定位（relative）和绝对定位（absolute）是最常用的两种。

相对定位 (relative)

相对定位是相对于元素自身原来的位置进行偏移。使用 position: relative; 可以将元素从其正常位置移动，但仍然保留在文档流中。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relative Positioning</title>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background-color: lightblue;
            position: relative; /* 设置容器为相对定位 */
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: coral;
            position: relative; /* 设置盒子为相对定位 */
            top: 50px; /* 向下移动50px */
            left: 50px; /* 向右移动50px */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

在这个例子中，.box 元素相对于它原本的位置向下移动了 50px，向右移动了 50px。

绝对定位 (absolute)

绝对定位是相对于最近的已定位祖先元素（即设置了 position: relative, absolute, fixed 或 sticky 的祖先元素）进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是浏览器窗口）。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absolute Positioning</title>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background-color: lightblue;
            position: relative; /* 设置容器为相对定位 */
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: coral;
            position: absolute; /* 设置盒子为绝对定位 */
            top: 50px; /* 距离容器顶部50px */
            left: 50px; /* 距离容器左侧50px */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

在这个例子中，.box 元素相对于它的最近已定位祖先元素（即 .container）进行定位，并向下移动了 50px，向右移动了 50px。

总结

**相对定位 (relative)**：元素相对于其正常位置进行偏移，但仍保留在文档流中。
**绝对定位 (absolute)**：元素相对于最近的已定位祖先元素进行定位，如果不存在这样的祖先元素，则相对于初始包含块。

sticky css

上一篇：那些让人拍案叫绝的小技巧(前端冷知识)
下一篇：CSS中的定位(postion)详解（css定位总结）

CSS position 相对定位和绝对定位用法详解附代码示例

相对定位 (relative)

示例代码：

绝对定位 (absolute)

示例代码：

总结

相关推荐

我用 1 个 2 手计算器换了 3 台 MacBook(上)

零基础也能搞定!DeepSeek大模型本地安装全攻略

Win7中同时安装python2和python3的方法

Python三目运算符(三元运算符)用法详解

PS零基础入门教程:Photoshop 2024工具详解—标尺工具

按颜色计数、求和、算平均值或最大值?学这个函数就够啦!

SpringBoot中使用LocalDateTime踩坑记录

中药古今研究:人参

「mysql第二次安装不了」mysql安装失败怎么清理干净?

最全的linux安装软件方法 linux安装软件流程