CSS 三大定位详解：相对定位、绝对定位、固定定位超全教程

原创于 2026-05-19 21:06:36 发布 · 418 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #前端

前言

在前端网页布局中，position 定位是核心布局技巧，熟练掌握相对定位、绝对定位、固定定位三种用法，就能轻松实现页面元素摆放、悬浮按钮、层级叠加等常用效果。本文从零讲解三种定位概念、偏移规则、代码实战以及综合案例，零基础也能看懂。

一、相对定位 position: relative

1. 定义

相对定位是让元素相对于自身原始默认位置进行偏移摆放。

2. 核心特点

元素原本占据的文档流空间完整保留，不会被其他元素挤占
仅视觉位置发生移动，实际占位不变
不会脱离标准文档流

3. 四大偏移属性规则

left：正值向右偏移，负值向左偏移
right：正值向左偏移，负值向右偏移
top：正值向下偏移，负值向上偏移
bottom：正值向上偏移，负值向下偏移

4. 重要注意点

相对定位偏移参照物只有自身原始位置，和父容器没有任何关系。

5. 实战演示代码以及结果

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相对定位</title>
  <style>  
    img {
      width: 100px;
      height: 100px;
    }
 

    #img1 {
      border: 4px red solid;

      position: relative; 

    }
 

    #img2 {
      border: 4px green solid;

      position: relative;

      top: 150px;
    }
 
    #img3 {
      border: 4px blue solid;
      position: relative;

    }
  </style>
</head>
<body>
  <img src="D:\测试前端\1.jpg" id="img1">
  <img src="D:\测试前端\2.jpg" id="img2">
  <img src="D:\测试前端\3.jpg" id="img3">
</body>
</html>

6. 运行总结

设置相对定位向下偏移 150px 的绿色边框图片，视觉位置下移，但原本所占空间依旧保留，后面蓝色图片不会向前填补空位。

二、绝对定位 position: absolute

1. 定义

绝对定位是元素相对于最近一级开启定位属性的父元素进行位置摆放。

2. 核心特点

完全脱离文档流，不再保留原始占位空间
页面其他元素会直接填补它原本的位置
元素存在层级关系，后编写的元素层级更高，覆盖在先编写元素上方

3. 偏移属性

left：距离参照物左侧距离 top：距离参照物顶部距离

4. 关键使用规则

父元素设置position: relative，子元素position: absolute，子元素以父盒子为参照物
若所有上层元素都未开启定位，绝对定位元素默认以浏览器窗口为参照物

5. 实战演示代码以及结果

<head>
    <style>
        .container {
      width: 400px;
      height: 400px;
      background-color: gray;
      
      position: absolute;
      left: 100px; 
      top: 100px; 
 
    }
        img {
            width: 100%;
            height: 100%;
        }
        .A{
            width: 100px;
            height: 100px;
        }
        #div1{
            border: 4px red solid;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        #div2{
            border: 4px green solid;
            position: absolute;
            left: 100px;
            top: 100px;
        }
        #div3{
            border: 4px blue solid;
        
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="div1" class="A">
            <img src="D:\测试前端\1.jpg"></div>
        
        <div id="div2" class="A">
            <img src="D:\测试前端\2.jpg"></div>
        
        <div id="div3" class="A">
            <img src="D:\测试前端\3.jpg"></div>
      </div>
    
</body>

6. 运行总结

红框、绿框开启绝对定位脱离文档流，绿框代码在后层级更高覆盖红框，未设置定位的蓝框自动填补空余位置。

三、固定定位 position: fixed

1. 定义

固定定位元素永远以浏览器可视窗口为参照物摆放位置。

2. 核心特点

页面滚动、滑动滚轮时，元素位置始终固定不变
同样脱离文档流，不保留原始占位
遵循层级规则，后写元素在上层

3. 偏移属性

left：距离浏览器左侧距离 top：距离浏览器顶部距离

4. 实战演示代码以及结果

<head>
    <style>
        img {
        width: 200px;
        height: 200px;
    }
    #A1{
        width: 100px;
        height: 100px;
        background-color: hotpink;
        border-radius: 11px;
        position: fixed;
        left: 300px; 
        top: 300px;
    }
    #A2{
        width: 50px;
        height: 50px;
        background-color: aqua;
        border-radius: 11px;
        position: fixed;
        left: 350px; 
        top: 350px;
    }
    </style>
</head>
<body>
    <div><img src="D:\测试前端\2.jpg" id="img1"></div>
    <div><img src="D:\测试前端\2.jpg" id="img2"></div>
    <div><img src="D:\测试前端\2.jpg" id="img3"></div>
    <div><img src="D:\测试前端\2.jpg" id="img4"></div>
    <div><img src="D:\测试前端\2.jpg" id="img5"></div>
    <div><img src="D:\测试前端\2.jpg" id="img6"></div>
    <div><img src="D:\测试前端\2.jpg" id="img7"></div>
    <div><img src="D:\测试前端\2.jpg" id="img8"></div>
    <div><img src="D:\测试前端\2.jpg" id="img9"></div>
    <div><img src="D:\测试前端\2.jpg" id="img10"></div>
    <div><img src="D:\测试前端\2.jpg" id="img11"></div>
    <div><img src="D:\测试前端\2.jpg" id="img12"></div>
    <div id="A1">耄耋哈气</div>
    <div id="A2">哈！</div>
</body>

5. 运行总结

页面大量图片撑开页面，滑动鼠标滚轮滚动页面，两个固定定位盒子位置丝毫不会变动，常用于网页回到顶部按钮、侧边悬浮栏。

四、三大定位综合实战案例

结合相对、绝对、固定定位完成经典布局：相对定位做父容器、绝对定位放标签、固定定位做返回顶部按钮。

<!doctype html>
<html>
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位综合练习</title>
  <style>
    /* 
      练习题目：使用三种定位方式完成以下布局
      
      1. 红色卡片：使用相对定位作为容器
      2. 蓝色标签：使用绝对定位放在红色卡片右上角
      3. 绿色返回按钮：使用固定定位固定在页面右下角
    */
 
    body {
      padding: 50px;
    }
 
    /* ========== 题目要求：完成下面红色卡片的样式 ========== */
    .card {
      width: 300px;
      height: 200px;
      background-color: #ff6b6b;
      border-radius: 10px;
      padding: 20px;
      color: white;
      font-size: 18px;
      margin-bottom: 600px; /* 留出滚动空间 */
      
      /* 提示：使用相对定位 */
      position: relative;
    }
 
    /* ========== 题目要求：完成下面蓝色标签的样式 ========== */
    .tag {
      width: 80px;
      height: 30px;
      background-color: #4dabf7;
      border-radius: 5px;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      
      /* 提示：使用绝对定位，相对于card定位 */
      position: absolute;
      right: 10px;
      top: -10px;
    }
 
    /* ========== 题目要求：完成下面返回按钮的样式 ========== */
    .back-btn {
      width: 50px;
      height: 50px;
      background-color: #51cf66;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      color: white;
      font-weight: bold;
      cursor: pointer;
      
      /* 提示：使用固定定位 */
      position: fixed;
      right: 50px;
      bottom: 50px;
    }
 
  </style>
 
</head>
 
<body>
 
  <!-- 练习题目说明 -->
  <h2>定位综合练习 - 请完成三个盒子的样式</h2>
  <p>请根据CSS注释中的提示，填写正确的定位属性和偏移值</p>
  
  <hr>
 
  <!-- 红色卡片容器 - 需要添加相对定位 -->
  <div class="card">
    这是卡片内容
    <br>请为我添加相对定位
    
    <!-- 蓝色标签 - 需要添加绝对定位，放到右上角 -->
    <div class="tag">标签</div>
  </div>
 
  <!-- 绿色返回按钮 - 需要添加固定定位，固定在右下角 -->
  <div class="back-btn">↑</div>
 
  <p>（下方内容用于测试固定定位的滚动效果）</p>
  <div style="height: 500px; background: #f0f0f0; padding: 20px;">
    滚动页面查看绿色按钮是否保持在右下角固定位置...
  </div>
 
</body>
 
</html>