发现宝藏
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。
position: absolute 和 position: fixed 都会使元素脱离文档流，但它们在行为上有所不同。以下是对这两种定位方式的详细解释：
1. position: absolute
- 脱离文档流：当元素的
position属性设置为absolute时，元素会从常规的文档流中脱离，意味着它不会占用空间，周围的元素会像它不存在一样进行排版。 - 定位依据：它的定位是相对于最近的已定位祖先元素（即祖先元素的
position为relative,absolute或fixed），如果没有这样的祖先元素，则会相对于文档的<html>根元素来定位。 - 影响：由于脱离了文档流，其他元素不会受其影响，元素的位置通过
top,right,bottom,left来确定。
2. position: fixed
- 脱离文档流：与
absolute类似，position: fixed也会让元素脱离文档流。元素不再占据正常的空间，其他元素会重新排版，仿佛这个元素不存在。 - 定位依据：
fixed定位是相对于浏览器窗口（视口）来进行定位的，而不是相对于任何父元素。无论页面滚动与否，fixed定位的元素始终保持在指定的位置。 - 影响：
fixed元素会固定在页面上，可以用于创建固定的导航栏或页脚等。滚动页面时，fixed元素不会随页面滚动，而是固定在视口的位置。
总结：
position: absolute和position: fixed都会使元素脱离文档流，不占据空间。absolute元素是相对于最近的已定位父元素来定位的，fixed元素是相对于浏览器窗口（视口）来定位的，并且永远保持在视口中的相同位置。
对比：
| 属性 | 脱离文档流 | 定位参考 | 位置固定方式 |
|---|---|---|---|
position: absolute | 是 | 最近的已定位祖先元素 | 根据 top, right, bottom, left 定位 |
position: fixed | 是 | 浏览器视口 | 固定在视口的位置，不随页面滚动 |
这两种定位方式常用于实现复杂布局，特别是在需要创建浮动元素、固定导航条或模态框等 UI 组件时。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
