css中fixed占位置吗

发表于前端技术学习版块 css,教程

CSS中的fixed定位是指元素的位置不会随着页面滚动而变化，它可以让元素一直停留在屏幕的某个位置。但是，fixed定位是否占据了页面的空间呢？下面，我们通过代码实例来一探究竟。代码实例： &

CSS中的fixed定位是指元素的位置不会随着页面滚动而变化，它可以让元素一直停留在屏幕的某个位置。但是，fixed定位是否占据了页面的空间呢？下面，我们通过代码实例来一探究竟。

代码实例：
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 100px;
  background-color: yellow;
}
#otherDiv {
  height: 1000px;
  background-color: red;
}
</style>
</head>
<body>

<div id="myDiv">This is a fixed div</div>

<div id="otherDiv">This is a normal div</div>

</body>
</html>

在上面的代码实例中，我们创建了一个fixed定位的元素（id为myDiv），并将它固定在屏幕的左上角（top为50px，left为50px）。同时，在页面下方，我们还创建了一个普通的div元素（id为otherDiv），其高度为1000px，背景色为红色。

那么，fixed定位的元素是否占据了页面的空间呢？我们可以通过观察页面滚动的效果来验证这一点。当我们向下滚动页面时，fixed定位的元素（即myDiv）并不会随着页面移动，而是一直停留在原地。此时，我们会发现，页面下方的红色区域会自动填充上myDiv所占据的空间，即使我们继续向下滚动，也不会重叠覆盖。

因此，我们可以得出结论：fixed定位的元素不会占据页面的空间。尽管它看上去像是覆盖在页面某个位置上，但实际上并没有占用该位置，所以页面下方的内容不会被遮盖。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。