您现在位置> 首页 > 编程 > HTML CSS > CSS
← CSS Margin 与 Padding 属性 CSS align-items属性 →

CSS定位：absolute与relative

著
原创 2025-09-10 CSS 已有人查阅

CSS定位：absolute与relative详细解析

概述

CSS定位是网页布局的核心技术之一，其中absolute（绝对定位）和relative（相对定位）是最常用的两种定位方式。理解它们的区别和适用场景对于前端开发者至关重要。本教程将深入探讨这两种定位方式，并通过实际示例展示它们的应用。

基本概念

文档流与定位

在正常文档流中，元素按照HTML中的顺序依次排列。CSS定位允许我们打破这种常规流，实现更灵活的布局效果。

absolute绝对定位

特性说明

绝对定位使元素脱离正常文档流，其位置相对于最近的已定位（非static）祖先元素确定。如果没有这样的祖先元素，则相对于初始包含块（通常是视口）定位。

核心特点：

  • 脱离文档流，不影响其他元素布局

  • 使用top、right、bottom、left属性精确定位

  • 允许元素重叠，适合创建悬浮元素

  • 在响应式设计中需要特别注意

基本语法

.absolute-element {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 200px;
  height: 150px;
}

示例1：创建模态框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - 绝对定位模态框示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }
        
        .container {
            position: relative;
            width: 100%;
            height: 400px;
            border: 2px solid #3498db;
            border-radius: 8px;
            padding: 20px;
        }
        
        .content {
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 6px;
        }
        
        .modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        
        .modal-content {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            width: 80%;
            max-width: 500px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }
        
        .modal-title {
            color: #2c3e50;
            margin-top: 0;
        }
        
        .modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #7f8c8d;
        }
        
        .btn {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>绝对定位示例 - 模态框</h1>
    <p>绝对定位常用于创建悬浮元素，如模态框、提示框等。</p>
    
    <div class="container">
        <div class="content">
            <h2>网页主要内容区域</h2>
            <p>这是一个普通的内容容器，包含一些示例文本。</p>
            <button class="btn" onclick="document.getElementById('modal').style.display = 'flex'">
                打开模态框
            </button>
        </div>
        
        <div id="modal" class="modal-overlay" style="display: none;">
            <div class="modal-content">
                <button class="modal-close" onclick="document.getElementById('modal').style.display = 'none'">
                    ×
                </button>
                <h2 class="modal-title">欢迎学习CSS定位</h2>
                <p>这是一个使用绝对定位创建的模态框。它相对于其父容器(.container)进行定位，因为父容器设置了position: relative。</p>
                <p>在代码号编程学习中，您可以找到更多关于CSS定位的教程和示例。</p>
                <button class="btn" onclick="document.getElementById('modal').style.display = 'none'">
                    关闭
                </button>
            </div>
        </div>
    </div>
</body>
</html>

示例2：图片标签定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - 图片标签定位示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .image-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .image-container img {
            width: 100%;
            display: block;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        
        .tag {
            position: absolute;
            padding: 8px 15px;
            background-color: #e74c3c;
            color: white;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
        }
        
        .tag-top-left {
            top: 15px;
            left: 15px;
        }
        
        .tag-top-right {
            top: 15px;
            right: 15px;
        }
        
        .tag-bottom-left {
            bottom: 15px;
            left: 15px;
        }
        
        .tag-bottom-right {
            bottom: 15px;
            right: 15px;
        }
        
        .tag-center {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(231, 76, 60, 0.9);
        }
    </style>
</head>
<body>
    <h1>绝对定位示例 - 图片标签</h1>
    <p>使用绝对定位可以在图片上精确放置标签或说明文字。</p>
    
    <div class="image-container">
        <img src="https://www.ebingou.cn/biancheng/images/3.jpg" alt="编程学习示例">
        <div class="tag tag-top-left">热门</div>
        <div class="tag tag-top-right">新品</div>
        <div class="tag tag-bottom-left">前端</div>
        <div class="tag tag-bottom-right">CSS</div>
        <div class="tag tag-center">代码号推荐</div>
    </div>
    
    <div style="margin-top: 30px; padding: 20px; background-color: white; border-radius: 8px;">
        <h2>实现原理</h2>
        <p>1. 父容器(.image-container)设置position: relative，为绝对定位子元素提供参考框架</p>
        <p>2. 每个标签(.tag)使用position: absolute进行绝对定位</p>
        <p>3. 使用top、right、bottom、left属性精确定位标签位置</p>
        <p>4. 中心标签使用transform: translate(-50%, -50%)实现居中</p>
    </div>
</body>
</html>

relative相对定位

特性说明

相对定位使元素相对于其正常位置进行偏移，但不会脱离文档流。元素原本占用的空间保持不变，其他元素不会重新排列。

核心特点：

  • 保持文档流中的位置

  • 使用偏移属性微调元素位置

  • 不影响其他元素的布局

  • 适合创建细微的调整效果

基本语法

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

示例1：微调元素位置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - 相对定位示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .box {
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 6px;
            background-color: #f9f9f9;
            border-left: 4px solid #3498db;
        }
        
        .highlight {
            position: relative;
            top: -5px;
            background-color: #ffeaa7;
            padding: 3px 8px;
            border-radius: 4px;
            font-weight: bold;
        }
        
        .offset-element {
            position: relative;
            left: 30px;
            background-color: #d5f5e3;
            padding: 15px;
            border-radius: 6px;
            margin-top: 10px;
        }
        
        .code {
            font-family: 'Consolas', monospace;
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 6px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>相对定位示例</h1>
        <p>相对定位允许元素相对于其正常位置进行偏移，同时保留原有空间。</p>
        
        <div class="box">
            <h2>基本用法 <span class="highlight">推荐</span></h2>
            <p>在这个例子中，"推荐"标签使用了相对定位向上偏移了5像素。</p>
            <p>注意：尽管它的视觉位置改变了，但它原本占用的空间保持不变。</p>
        </div>
        
        <div class="box">
            <h2>代码示例</h2>
            <div class="code">
.highlight {<br>
  position: relative;<br>
  top: -5px;<br>
  background-color: #ffeaa7;<br>
  padding: 3px 8px;<br>
  border-radius: 4px;<br>
  font-weight: bold;<br>
}
            </div>
        </div>
        
        <div class="box">
            <h2>偏移元素</h2>
            <p>下面的元素使用了相对定位向右偏移了30像素：</p>
            <div class="offset-element">
                <p>这个元素使用了<code>position: relative; left: 30px;</code></p>
                <p>它向右移动了30像素，但原本的空间保持不变。</p>
            </div>
            <p>这是偏移元素后面的内容，位置没有受到影响。</p>
        </div>
    </div>
</body>
</html>

示例2：创建重叠效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - 相对定位重叠效果</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .card-container {
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }
        
        .card {
            width: 250px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        
        .card-1 {
            position: relative;
            z-index: 3;
            transform: rotate(-5deg);
        }
        
        .card-2 {
            position: relative;
            left: -30px;
            top: 20px;
            z-index: 2;
            transform: rotate(2deg);
            background-color: #e8f4fc;
        }
        
        .card-3 {
            position: relative;
            left: -60px;
            top: 40px;
            z-index: 1;
            transform: rotate(4deg);
            background-color: #fce8e8;
        }
        
        .card-title {
            color: #2c3e50;
            margin-top: 0;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        
        .card-content {
            color: #34495e;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>相对定位示例 - 重叠卡片</h1>
    <p>使用相对定位和z-index可以创建有趣的重叠效果。</p>
    
    <div class="card-container">
        <div class="card card-1">
            <h3 class="card-title">CSS基础</h3>
            <p class="card-content">学习CSS基本语法和选择器，掌握样式设计基础。</p>
        </div>
        
        <div class="card card-2">
            <h3 class="card-title">布局技术</h3>
            <p class="card-content">深入了解各种CSS布局技术，包括定位、浮动和Flexbox。</p>
        </div>
        
        <div class="card card-3">
            <h3 class="card-title">响应式设计</h3>
            <p class="card-content">掌握响应式网页设计原理，创建适配多设备的网页。</p>
        </div>
    </div>
    
    <div style="margin-top: 150px; padding: 20px; background-color: white; border-radius: 8px;">
        <h2>实现说明</h2>
        <p>1. 所有卡片使用position: relative实现相对定位</p>
        <p>2. 通过left和top属性偏移卡片位置</p>
        <p>3. 使用z-index控制卡片的堆叠顺序</p>
        <p>4. 使用transform: rotate()添加轻微的旋转效果</p>
        <p>5. 每张卡片保持原有空间，不影响其他元素布局</p>
    </div>
</body>
</html>

absolute与relative结合使用

创建定位上下文

当absolute定位的元素需要相对于特定父元素定位时，可以给父元素设置relative定位，创建一个定位上下文。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - 相对与绝对定位结合使用</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f9f9f9;
        }
        
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .photo-card {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        
        .photo-card:hover {
            transform: translateY(-5px);
        }
        
        .photo-card img {
            width: 100%;
            display: block;
            height: 200px;
            object-fit: cover;
        }
        
        .photo-info {
            padding: 15px;
            background-color: white;
        }
        
        .photo-title {
            margin: 0 0 10px 0;
            color: #2c3e50;
        }
        
        .photo-description {
            margin: 0;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        .photo-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: #e74c3c;
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        
        .photo-date {
            position: absolute;
            bottom: 15px;
            left: 15px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
        }
    </style>
</head>
<body>
    <h1>相对与绝对定位结合使用</h1>
    <p>通过给父元素设置relative定位，可以为绝对定位的子元素创建定位上下文。</p>
    
    <div class="gallery">
        <div class="photo-card">
            <img src="https://www.ebingou.cn/biancheng/images/4.jpg" alt="HTML5教程">
            <div class="photo-badge">热门</div>
            <div class="photo-date">2023-10-15</div>
            <div class="photo-info">
                <h3 class="photo-title">HTML5基础教程</h3>
                <p class="photo-description">学习现代HTML5语法和语义化标签</p>
            </div>
        </div>
        
        <div class="photo-card">
            <img src="https://www.ebingou.cn/biancheng/images/5.jpg" alt="CSS教程">
            <div class="photo-badge">更新</div>
            <div class="photo-date">2023-10-10</div>
            <div class="photo-info">
                <h3 class="photo-title">CSS布局实战</h3>
                <p class="photo-description">掌握Flexbox和Grid布局技术</p>
            </div>
        </div>
        
        <div class="photo-card">
            <img src="https://www.ebingou.cn/biancheng/images/6.jpg" alt="JavaScript教程">
            <div class="photo-badge">推荐</div>
            <div class="photo-date">2023-10-05</div>
            <div class="photo-info">
                <h3 class="photo-title">JavaScript进阶</h3>
                <p class="photo-description">深入学习JavaScript高级特性</p>
            </div>
        </div>
    </div>
    
    <div style="margin-top: 40px; padding: 20px; background-color: white; border-radius: 8px;">
        <h2>实现原理</h2>
        <p>1. 父元素(.photo-card)设置position: relative，创建定位上下文</p>
        <p>2. 徽章(.photo-badge)使用position: absolute，相对于父元素定位在右上角</p>
        <p>3. 日期(.photo-date)使用position: absolute，相对于父元素定位在左下角</p>
        <p>4. 信息区域(.photo-info)保持正常文档流，不受绝对定位元素影响</p>
    </div>
</body>
</html>

本节课程知识要点

  1. 定位方式区别：

    • absolute：脱离文档流，相对于已定位祖先元素定位

    • relative：保持文档流位置，相对于自身原始位置偏移

  2. 适用场景：

    • absolute：适合创建悬浮元素、模态框、精确定位

    • relative：适合微调元素位置、创建重叠效果

  3. 结合使用：

    • 父元素设置relative创建定位上下文

    • 子元素使用absolute相对于父元素定位

  4. 注意事项：

    • absolute定位元素需要明确指定尺寸

    • 使用z-index控制重叠元素的堆叠顺序

    • 在响应式设计中谨慎使用绝对定位

  5. 实际应用：

    • 导航菜单、提示框、图片标签使用绝对定位

    • 细微调整、装饰元素使用相对定位

本文标签：
← CSS Margin 与 Padding 属性 CSS align-items属性 →

感谢您的认可和支持

微信支付二维码 - 长按识别

微信

支付宝二维码 - 长按识别

支付宝

持续输出优质内容需要动力，您的每一个打赏都是深夜码字时的温暖咖啡☕
分享笔记 （共有 篇笔记）
验证码：
微信公众号