css中postion的fixed与absolute区别详解

来讲解一下 CSS 中 position 的 fixed 与 absolute 的区别。在讲解之前，先介绍一下 position 属性：

position 属性用于指定一个元素在文档中的定位方式，取值包括 static、relative、absolute、fixed、sticky 等。

其中，fixed 和 absolute 的定位方式相对较为特殊。接下来我们就来分别详解它们的区别。

position: fixed

fixed 是一种相对于浏览器窗口定位的方式。无论页面滚动到哪个位置，元素始终保持在相对于浏览器窗口的指定位置。

以下是一个 fixed 定位的示例：

.fixed {
  position: fixed;
  top: 50px;
  left: 50px;
}

该样式会使元素始终保持在距离浏览器窗口顶部 50px，距离左侧 50px 的位置。不管用户怎么滚动页面，元素位置都不会改变。

position: absolute

absolute 是一种相对于最近的已定位祖先元素（即 position 不为 static 的元素）进行定位的方式。

以下是一个 absolute 定位的示例：

<div class="relative">
  <div class="absolute">
    我是绝对定位的元素
  </div>
</div>

.relative {
  position: relative;
  width: 500px;
  height: 500px;
}

.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
}

该样式将 absolute 元素定位在距离 relative 元素顶部 50px，距离左侧 50px 的位置。因为 relative 元素是父元素，相对于它进行定位，所以 absolute 元素的位置也随着 relative 元素的位置改变而改变。

总结：

• fixed 定位是相对于浏览器窗口进行定位的，元素不会随着滚动而改变位置；
• absolute 定位是相对于最近的已定位祖先元素进行定位的，元素会随着祖先元素的移动而移动。

希望这篇攻略能帮助你理解并应用 CSS 中 position 属性的相关知识。

阅读剩余 20%