CSS定位详解：相对定位、绝对定位与固定定位实战教程

脚本专家 · 发表于 2 小时前

在前端开发中，CSS定位（Positioning）是控制元素在页面上精确排布的核心机制。除了默认的静态定位（static），开发中最常用的三种定位方式分别是相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。每种定位都有其独特的参照物、文档流行为和应用场景。本文将通过完整的HTML代码示例，带你掌握这三种定位的实际用法。

一、相对定位（Relative Positioning）
相对定位的元素会相对于自身在正常文档流中的原始位置进行偏移，但它在文档流中占据的空间仍然保留，不会影响其他元素的布局。常用 top、right、bottom、left 属性控制偏移量，适合微调元素位置，或者作为绝对定位子元素的定位参考点。

下面是完整的相对定位示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.relative-box {
position: relative;
left: 50px;
top: 20px;
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>相对定位示例</h2>
<p>这是一个普通段落。</p>
<div class="relative-box">这个div使用了相对定位，向右移动50px，向下移动20px。</div>
<p>注意相对定位元素原来的空间仍然保留。</p>
</body>
</html>

复制代码

运行后可见，蓝色方块向右下方偏移，但它原来所在位置（即上方段落与下方段落之间的空间）依然空着，没有被后续元素占据。

二、绝对定位（Absolute Positioning）
绝对定位的元素会完全脱离文档流，不再占据任何空间。它的定位参照物是最近的“已定位”祖先元素（即 position 不为 static 的祖先），如果没有任何已定位祖先，则相对于 <html> 元素（初始包含块）定位。通过 top、right、bottom、left 可以精确定位到容器内的任意坐标。绝对定位常用于创建弹出层、下拉菜单、图标悬浮等浮动元素。

以下是一个绝对定位在相对定位容器内的示例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 400px;
height: 200px;
background-color: #f0f0f0;
border: 2px solid gray;
}
.absolute-box {
position: absolute;
right: 20px;
bottom: 10px;
width: 150px;
height: 80px;
background-color: lightcoral;
border: 2px solid red;
}
</style>
</head>
<body>
<h2>绝对定位示例</h2>
<div class="container">
这是一个相对定位的容器
<div class="absolute-box">这个div使用了绝对定位，相对于容器定位在右下角。</div>
</div>
</body>
</html>

复制代码

在此代码中，容器 .container 设置了 position: relative，因此 .absolute-box 的定位参照就是该容器，最终显示在容器的右下角。如果容器没有设置任何定位属性，那么绝对定位元素将相对于浏览器窗口（或 <html>）定位。

三、固定定位（Fixed Positioning）
固定定位的元素也完全脱离文档流，但它始终相对于浏览器视口（viewport）进行定位，不会随页面滚动而移动。常用于制作始终悬浮在屏幕某处的导航栏、返回顶部按钮、广告横幅等。

下面是一个固定定位按钮的示例，它固定在页面右下角：

<!DOCTYPE html>
<html>
<head>
<style>
.fixed-box {
position: fixed;
right: 20px;
bottom: 20px;
width: 100px;
height: 50px;
background-color: lightgreen;
border: 2px solid green;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<h2>固定定位示例</h2>
<p>向下滚动页面，右下角的按钮会固定在相同位置。</p>
<div style="height: 2000px;">很多内容...</div>
<div class="fixed-box">固定按钮</div>
</body>
</html>

复制代码

当页面滚动时，绿色按钮始终位于视口右下角，不会随内容滚动而移动。

四、三种定位方式的主要区别

- 参照物不同：相对定位参照自身原始位置；绝对定位参照最近的已定位祖先元素；固定定位参照浏览器窗口。
- 文档流行为不同：相对定位保留原空间，不脱离文档流；绝对定位和固定定位均脱离文档流，不占据空间。
- 滚动影响不同：相对定位和绝对定位的元素会随父容器或页面滚动；固定定位永远固定在视口某一位置。
- 常见用途：相对定位常用于微调元素位置或作为绝对定位子元素的定位上下文；绝对定位适合制作弹出层、浮动图标；固定定位适合做固定导航栏、返回顶部按钮。
- 三者均支持 z-index 属性控制层叠顺序。

五、综合对比演示（含粘性定位）
以下代码在一个页面中同时展示相对定位、绝对定位、固定定位，并额外演示了粘性定位（sticky）的行为。粘性定位在滚动到指定阈值前表现为相对定位，之后表现为固定定位。

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.container {
position: relative;
width: 80%;
height: 300px;
margin: 30px auto;
background-color: #f5f5f5;
border: 2px dashed #333;
padding: 20px;
}
.relative-box {
position: relative;
left: 50px;
top: 20px;
width: 200px;
height: 100px;
background-color: rgba(173, 216, 230, 0.7);
border: 2px solid blue;
}
.absolute-box {
position: absolute;
right: 30px;
top: 50px;
width: 150px;
height: 80px;
background-color: rgba(240, 128, 128, 0.7);
border: 2px solid red;
}
.fixed-box {
position: fixed;
left: 20px;
top: 20px;
width: 120px;
height: 60px;
background-color: rgba(144, 238, 144, 0.7);
border: 2px solid green;
text-align: center;
line-height: 60px;
}
.sticky-box {
position: sticky;
top: 10px;
width: 100%;
height: 50px;
background-color: rgba(255, 255, 0, 0.7);
border: 2px solid orange;
text-align: center;
line-height: 50px;
margin-top: 20px;
}
.long-content {
height: 1500px;
margin-top: 30px;
padding: 20px;
background-color: #eee;
}
</style>
</head>
<body>
<div class="fixed-box">固定定位</div>
<h1>CSS定位方式演示</h1>
<div class="sticky-box">粘性定位(Sticky)</div>
<div class="container">
<div class="relative-box">相对定位</div>
<div class="absolute-box">绝对定位</div>
<p>这是一个相对定位的容器，包含相对定位和绝对定位的元素。</p>
</div>
<div class="long-content">
<p>向下滚动页面，观察不同定位元素的行为...</p>
<p>固定定位元素始终在窗口固定位置。</p>
<p>粘性定位元素在到达指定位置时会粘住。</p>
</div>
</body>
</html>

复制代码

通过这个综合示例，可以直观地看到：固定定位的绿色方块始终固定在视口左上角；相对定位的元素在容器内向右下方偏移且保留原空间；绝对定位的元素位于容器右上角；粘性定位的黄色条在滚动到距离视口顶部10px时“粘”在顶部。

六、总结
理解 relative、absolute 和 fixed 三种定位的工作机理，是前端页面布局与交互的基础。相对定位用于微调与提供定位上下文，绝对定位用于精确控制浮动元素，固定定位用于实现视口恒定的 UI 组件。在实际项目中，常结合它们与 z-index 实现复杂的层叠效果。掌握这些知识后，你将能够更灵活地控制页面元素的位置，提升开发效率。

热心网友2 · 发表于 2 小时前

这篇教程写得非常清晰实用，尤其是每个定位方式都配了完整的可运行代码，对新手很友好。相对定位保留原空间这一点容易忽略，你的例子直观展示了这个特性；绝对定位结合相对定位容器做嵌套布局也是日常开发的高频用法。第四部分的对比表格总结得很到位，把参照物、文档流和滚动影响区分开了。最后还带了粘性定位的实战演示，内容很全面。

CSS定位详解：相对定位、绝对定位与固定定位实战教程

Re: CSS定位详解：相对定位、绝对定位与固定定位实战教程

指导单位

旗下站点

联系我们