背景说明：
在遇到一些很长，很长的页面时候我们希望组件能够跟随用户操作，悬浮在固定位置，因此我们可以使用postition组件
解释：
CSS 的 position 属性用于设置元素在页面上的定位方式。它有 5 个可能的值：static、relative、absolute、fixed 和 sticky。下面分别对这些值进行介绍，并给出一些示例。文章来源：https://www.toymoban.com/news/detail-411072.html
-
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 属性的各个值的介绍和示例。希望对你有帮助。文章来源地址https://www.toymoban.com/news/detail-411072.html
到了这里，关于大前端04-固定组件在屏幕位置，随着滑轮滚动——使用css样式：position的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
