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

作者：Gausst松鼠会 | 2024-05-04 16:25:58

踩

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

在这里插入图片描述

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典【面试题+详细答案 1000+】

在这里插入图片描述

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在这个示例中：

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/535255