CSS中 absolute 与 fixed 的异同（示例代码）

原创已于 2025-03-11 15:56:01 修改 · 1.1k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#CSS位置 #大剑师

于 2024-04-12 00:00:00 首次发布

CSS理论与实践专栏收录该内容

84 篇文章

订阅专栏

本文介绍了计算机专业专家兰特在航空航海领域的工作背景，以及他在GIS技术开发中的专业知识，重点讲解了absolute与fixed两种CSS定位方法的异同，包括定位原理、层叠顺序和滚动行为，并通过代码示例进行说明。

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

在这里插入图片描述

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	`Openlayers` 【入门教程】 - 【源代码+示例 300+】
2	`Leaflet` 【入门教程】 - 【源代码+图文示例 150+】
3	`MapboxGL`【入门教程】 - 【源代码+图文示例150+】
4	`Cesium` 【入门教程】 - 【源代码+综合教程 200+】
5	`threejs`【中文API】 - 【源代码+图文示例200+】
6	Shader 编程【图文示例 100+】
7	Geoserver 【配置教程 100+】
8	卫星应用开发教程【配置+应用教程 100+】
9	GIS数字孪生与大模型【应用实战 100+】
10	报表与数字大屏【Echarts 实战示例】 - 【D3 综合教程】 - 【其他大屏】

absolute与fixed共同点：

定位脱离文档流：position: absolute 和 position: fixed 都会使元素脱离正常的文档流，这意味着它们不再占用正常布局的空间，其他元素会无视它们的存在进行布局。
可精确定位：两者都可以通过 top, right, bottom, left 属性进行精确的定位，即相对于某个参照物指定元素的位置。
覆盖与层叠顺序：它们都可能覆盖非定位元素或其他定位元素，层叠顺序由 z-index 属性控制。

absolute与fixed不同点：

参照物不同：
- position: absolute 的元素会相对于最近的已定位（非 static 定位）祖先元素进行定位。如果这样的祖先元素不存在，则相对于初始包含块（通常是 <html> 元素）定位。
- position: fixed 的元素则是相对于浏览器视口（viewport）进行定位，无论页面怎么滚动，它的位置始终不变。
滚动行为：
- 当页面有滚动条时，fixed 定位的元素会始终保持在视口的某个位置，不会随着页面的滚动而滚动。
- 而 absolute 定位的元素虽然也脱离文档流，但如果其父元素发生滚动，它会跟随这个滚动的父元素一起移动。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .parent {
            position: relative; /* 用于作为 absolute 定位的参考 */
            height: 200vh; /* 增加高度以便滚动演示 */
            background-color: lightblue;
        }
        .abs {
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: red;
            width: 100px;
            height: 100px;
        }
        .fix {
            position: fixed;
            top: 50px;
            right: 50px;
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="abs">Absolute Positioned Element</div>
    </div>
    <div class="fix">Fixed Positioned Element</div>
</body>
</html>

在这个示例中：

.abs 类的元素使用了 position: absolute，它会相对于设置了 position: relative 的 .parent 父元素定位，在页面滚动时，若父元素超出视口范围，此元素也会随之滚动。
.fix 类的元素使用了 position: fixed，它会始终保持在浏览器视口右上角50像素的位置，不论页面如何滚动，它都不会移动。