CSS的四种定位方式总结

最新推荐文章于 2025-03-27 17:07:17 发布

cleverGump

最新推荐文章于 2025-03-27 17:07:17 发布

阅读量4.3k

点赞数 3

分类专栏：前端文章标签： css 定位

本文链接：https://blog.csdn.net/cleverGump/article/details/91375139

版权

前端专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了CSS中的四种定位方式：静态定位（默认）、相对定位、绝对定位和固定定位，包括每种定位方式的特点、如何使用top/bottom/left/right属性以及它们在事件触发位置上的表现。通过案例分析了定位上下文的概念，帮助理解各种定位方式的差异和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS的四种定位方式（position）

静态定位（默认） static
相对定位 relative
绝对定位 absolute
固定定位 fixed

案例使用的 html 代码：

<p>First Paragraph</p>
<p>Second Paragraph</p>
<p id="specialpara">Third Paragraph (with ID)</p>
<p>Fourth Paragraph</p>

1. 静态定位（默认）

position: static;

在静态定位的情况下，每个元素都处在常规文档流中。它们都是块级元素，所以就会在页面中自上而下地堆叠起来。

静态定位的元素，设置 top bottom left right 属性将不起作用，因为元素只会按照其体积大小，从上往下依次排列，不可能按照你设定的上下左右的数值去排列。

demo 默认的显示效果：
在这里插入图片描述

2. 相对定位

position: relative;

“相对定位”, 相对的是它原来在文档流中的位置（或者默认位置）.
相对定位下，可以利用 top 和 left 属性相对于元素在文档流中的常规位置重新定位，但是页面上其他元素位置都不变，设置相对定位的元素，其常规位置的空间依然保留着（依然有和原先同样大小的体积）
可以给 top 和 left 属性设定负值，把元素向上、向左移动。

相对定位，可以简单理解为：元素原位置的空间依然保留不被占用，元素移动到页面上的其他位置了，元素在新位置上响应事件。

<body>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <p id="specialpara" style="position:relative; top:50px; left:30px; color: red">Third Paragraph (with ID)</p>
    <p>Fourth Paragraph</p>

    <script>
        // 点击该元素当前显示的位置时，会响应事件，点击原位置不响应事件
        document.getElementById('specialpara').addEventListener('click', function () {
            alert('click');
        });
    </script>
</body>

demo:

 p#specialpara {
 	position:relative; top:25px; left:30px;
}

在这里插入图片描述

3. 绝对定位

position: absolute;

绝对定位下，元素从文档流中被“连根拔起”，然后再相对于其他元素（在这里，
是默认的定位上下文 body）定位。但是会随着文档的滚动也一起滚动，所以滚动后该元素可能会滚动到屏幕外。
绝对定位的元素完全脱离了常规文档流，它会相对于顶级元素 body 定位。
绝对定位元素默认的定位上下文是 body 元素，但该上下文可以修改。

p#specialpara {
	position:absolute; top:25px; left:30px; color:red;
}

绝对定位，定位上下文是默认的 body时，页面向下滚动前后的显示情况：
在这里插入图片描述

绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要把相应祖先元素的 position 设定为 relative 即可。

4. 固定定位

position: fixed;

固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。固定定位适合做悬浮标签效果，页面滚动时始终悬浮在某个特定位置不变。
页面在最顶端时，固定定位和绝对定位的显示效果类似。但是一旦滚动，二者就显现出差异了。
固定定位，常用于创建不随页面滚动而移动的导航元素

 p#specialpara {
 	position:fixed; top:30px; left:20px;
}

固定定位，页面滚动前后的显示效果：
在这里插入图片描述

事件触发位置的结论

经测试发现，任何定位下，为元素设定的事件的触发位置，都是该元素在页面上的当前显示位置（而不是该元素的原始位置—对于相对定位的元素来说）

总结

四种定位方式（position）：
- 静态定位（默认） static
- 相对定位 relative
- 绝对定位 absolute
- 固定定位 fixed
只有静态定位（默认方式）不会脱离文档流，其他3种定位方式都会脱离文档流。
关于定位上下文的总结：
- static: 没有定位上下文，所以 top bottom left right 属性无效。
- relative: 定位上下文是该元素原先的位置。
- absolute: 定位上下文是该元素的“设置了 relative 定位的最小级祖先容器"，如果该元素的所有祖先容器都没有设置 relative 定位，则定位上下文是 body元素。
- fixed：定位上下文是视口（浏览器窗口或手持设备的屏幕）。
top bottom left right 属性都是相对于该元素的定位上下文而言的。由于 static 定位没有定位上下文，所以为 static 定位的元素设置 top bottom left right 属性将无效，只有为 relative, absolute, fixed 定位的元素设置 top bottom left right 属性才有效，
absolute 定位和 fixed定位的区别是：定位上下文不同，导致 absolute 定位的元素会随着文档的滚动而一同滚动， fixed 定位的元素不会随着文档的滚动而一同滚动。
任何定位方式下，为元素设定的事件的触发位置，都是该元素在页面上的当前显示位置，不是原位置。