【CSS 面经】absolute 与 fixed 共同点与不同点

原创于 2024-12-07 22:09:24 发布 · 800 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript #开发语言 #html #html5

CSS面经专栏收录该内容

53 篇文章

订阅专栏

文章目录

在前端开发中，CSS 定位是布局中不可或缺的一部分。定位可以帮助我们精准地控制元素在页面中的位置。在众多定位方式中，absolute 和 fixed 是最常用的两种。它们有许多相似之处，但也存在显著的差异。本文将详细介绍这两种定位方式的共同点与不同点，帮助大家更好地理解它们的应用场景。

一、absolute 和 fixed 的共同点

1. 定位方式的基本原理

absolute 和 fixed 都属于定位元素，它们的定位方式都脱离了常规文档流。这意味着使用这两种定位的元素不会占据空间，因此其他元素会像它们不存在一样进行布局。它们都依赖于top、right、bottom、left等属性来决定元素的最终位置。

2. 脱离文档流

无论是 absolute 还是 fixed 定位，元素都会脱离文档流。这意味着这些元素不再影响其他元素的布局，它们不会占据常规空间，周围的元素会重新调整位置，填补它们原本占据的空间。因此，使用这些定位方式时，我们要小心元素间的相互影响，避免布局混乱。

3. 相对定位参照对象

这两种定位方式都有一个共同的特点，它们的定位是相对于某个“参照元素”进行的。absolute 定位的元素会相对于最近的具有定位属性（如 relative、absolute 或 fixed）的祖先元素进行定位。如果找不到这样的祖先元素，则相对于页面的 body 元素进行定位。而 fixed 定位的元素则始终是相对于浏览器窗口进行定位。

二、absolute 定位详解

1. 定位规则

absolute 定位的元素会相对于最近的定位祖先元素进行定位。如果没有找到定位祖先元素，那么它将相对于 body 元素进行定位。其位置由 top、right、bottom 和 left 来决定。

2. 使用场景

absolute 定位通常用于需要在父元素内进行精确布局时，比如弹出框、下拉菜单等。当我们想要元素脱离正常文档流，但又希望它相对于某个特定的父元素进行布局时，absolute 是非常适合的选择。

示例代码

<div style="position: relative;">
  <div style="position: absolute; top: 10px; left: 20px;">Absolute定位</div>
</div>

在这个例子中，absolute 定位的元素会相对于其最近的 relative 定位的父元素进行定位。由于 relative 的父元素有 position: relative; 属性，因此 absolute 定位的元素会按照父元素的顶部和左边进行定位。

3. 面试中的考点

absolute 定位元素的位置如何计算？ absolute 定位的元素的位置是相对于它的最近定位祖先元素来计算的，如果没有找到定位祖先，它就会相对于 body 计算位置。

三、fixed 定位详解

1. 定位规则

与 absolute 定位不同，fixed 定位的元素是相对于浏览器窗口（viewport）进行定位的，而不是相对于任何其他元素。无论页面如何滚动，fixed 定位的元素都始终会固定在浏览器窗口中的指定位置。

2. 使用场景

fixed 定位常用于页面中需要始终显示的元素，如固定的导航栏、固定的回到顶部按钮等。当我们希望某个元素无论页面如何滚动，都能保持在视口中的某个位置时，fixed 定位是最好的选择。

示例代码

<div style="position: fixed; top: 0; left: 0;">Fixed定位</div>

这个例子中，fixed 定位的元素会相对于浏览器窗口进行定位，无论页面怎么滚动，元素都始终停留在页面的顶部和左侧。

3. 面试中的考点

fixed 定位的元素如何响应页面滚动？ fixed 定位的元素不会随页面滚动而移动，它会始终固定在视口中的指定位置。

四、absolute 和 fixed 的不同点

特性	absolute 定位	fixed 定位
定位参考	相对于最近的定位父元素，如果没有则相对于 `body`	相对于浏览器窗口（viewport）
滚动时的表现	随着页面滚动而移动	固定在视口中，不随页面滚动而变化
使用场景	弹出层、下拉菜单、相对定位布局等	固定导航栏、返回顶部按钮、悬浮元素等
脱离文档流	是，绝对定位元素脱离文档流	是，固定定位元素脱离文档流