css中的定位之fixed和absolute的区别

最新推荐文章于 2024-09-28 15:35:33 发布

络卡

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量372

点赞数 3

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

本文链接：https://blog.csdn.net/DOVISK/article/details/142490395

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

fixed 和 absolute 都是 CSS 中的定位方式，但它们的区别主要在于它们相对于哪个元素进行定位，以及如何处理页面滚动的情况。

主要区别：

定位的参考点：
- absolute (绝对定位)：
  - 相对于最近的拥有定位属性的祖先元素进行定位（即该祖先元素设置了 position: relative、absolute 或 fixed）。如果没有这样的祖先元素，则相对于初始包含块（通常是 <html> 元素的视口）定位。
- fixed (固定定位)：
  - 始终相对于浏览器视口进行定位，与页面中的任何其他元素无关。页面滚动时，fixed 元素的位置保持不变。
页面滚动时的表现：
- absolute：
  - 页面滚动时，absolute 定位的元素会随着页面内容一起滚动。
- fixed：
  - 页面滚动时，fixed 定位的元素会固定在浏览器视口的指定位置，不会随着页面内容滚动。
文档流：
- absolute 和 fixed 都会使元素脱离文档流，即它们不会占据原始位置，其他元素会像它们不存在一样重新布局。

具体示例说明：

`absolute` 示例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 400px;
  height: 200px;
  background-color: lightblue;
}

.absolute-element {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: yellow;
  width: 100px;
  height: 50px;
}
</style>
</head>
<body>

<div class="container">
  <div class="absolute-element">绝对定位</div>
</div>

</body>
</html>

在这个例子中，.absolute-element 被放在 .container 内，且 .container 设置了 position: relative，因此 .absolute-element 是相对于 .container 定位的。
如果没有 .container 的 position: relative，.absolute-element 将相对于整个页面进行定位。

`fixed` 示例：

<!DOCTYPE html>
<html>
<head>
<style>
.fixed-element {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 50px;
  background-color: yellow;
}
</style>
</head>
<body>

<p>页面内容</p>

<div class="fixed-element">
  固定定位
</div>

<p>更多页面内容</p>

</body>
</html>