大前端04-固定组件在屏幕位置，随着滑轮滚动——使用css样式：position

最新推荐文章于 2023-11-22 20:22:08 发布

菜鸟老文

最新推荐文章于 2023-11-22 20:22:08 发布

阅读量2.1k

点赞数 2

文章标签：架构 spring boot java

本文链接：https://blog.csdn.net/weixin_44242433/article/details/130029096

版权

背景说明：

在遇到一些很长，很长的页面时候我们希望组件能够跟随用户操作，悬浮在固定位置，因此我们可以使用postition组件

CSS 的 position 属性用于设置元素在页面上的定位方式。它有 5 个可能的值：static、relative、absolute、fixed 和 sticky。下面分别对这些值进行介绍，并给出一些示例。

static（默认值）：元素按照正常的文档流进行布局。这是所有元素的默认定位方式。在这种定位方式下，元素不受 top、right、bottom 和 left 属性的影响。

Copy codediv {
  position: static;
}

relative：元素相对于其正常位置进行定位。使用 top、right、bottom 和 left 属性可以调整元素相对于其原始位置的偏移。注意：相对定位元素不会脱离文档流，原位置仍然会被占用。

Copy codediv {
  position: relative;
  top: 20px;
  left: 50px;
}

absolute：元素相对于最近的非 static 定位的祖先元素进行绝对定位。使用 top、right、bottom 和 left 属性可以调整元素相对于祖先元素的偏移。绝对定位的元素会脱离文档流，原位置不再占用空间。

Copy code.relative-parent {
  position: relative;
}

.absolute-child {
  position: absolute;
  top: 10px;
  right: 20px;
}

fixed：元素相对于浏览器窗口进行固定定位，即使页面滚动，元素也始终保持在设定的位置。使用 top、right、bottom 和 left 属性可以调整元素相对于浏览器窗口的偏移。固定定位的元素会脱离文档流，原位置不再占用空间。

Copy codediv {
  position: fixed;
  top: 0;
  right: 0;
}

sticky：元素的定位在滚动页面时可以在相对和固定定位之间切换。当页面滚动到一定程度时，元素会固定在设定的位置。使用 top、right、bottom 和 left 属性可以调整元素相对于浏览器窗口的偏移。粘性定位的元素在没有固定时仍然遵循文档流。

Copy codediv {
  position: sticky;
  top: 20px;
}

以上就是 CSS position 属性的各个值的介绍和示例。希望对你有帮助。

关注